VUE NOTE——组件化

2020-12-15 2222

一、 父子组件之间的通信

  1. 父传子： props
    在子组件中有props属性，props:['childData','childMovies'] 这种不常用。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    props: {    
      childData: {
        type: String,
        default: "hi",
        reuiqred: false
      },
      childMovies: {
        type: Array,
        default () {
            return [];
        }
    }
    在父组件中使用子组件时：
    <cpn :child-data="ParentData" :child-movies="ParentMovies"></cpn>
    v-bind动态绑定的属性 不可以用驼峰表示， childData 改为 child-data
    子组件的template中： 
    1
    2
    <div v-for="let movie in childMovies"></div> 
    <p>{{childData}}</p>
  2. 子传父： $emit event
    在子组件的methods中：
    btnClick(){this.$emit('itemClick', item)}
    第一个参数：自定义事件名称
    第二个参数：向父组件发送的数据
    在父组件html中监听子组件自定义的事件：
    <cpn @itemClick="processItem()"></cpn>
    父组件的methods中： processItem(item){处理item}
  3. 父组件访问子组件
    1. this.$children
      $children是一个数组，里面放着该组件内的所有子组件对象
    2. $refs 默认是空对象
      这种访问方式比较常用
      在子组件中给ref属性赋值,相当于该组件的key， <cpn ref="invoice"></cpn>
      在父组件中， this.$refs.invoice即可拿到子组件
  4. 子组件访问父组件 （一般很少用到）
    1.this.$parent.name 直接访问父组件
    2.this.$root.msg 访问根组件（Vue实例）

二、 slot

  1. 给子组件预留插槽

<template>

<div>

<h1>子组件标题</h1>

<slot><slot>

</div>

</template>

在父组件中使用时：

<cpn><p>替换标题<p><cpn>
<p>XXXX</p> 会替换<slot></slot>

给slot传默认值 <slot><div>若使用子组件时不传值 则显示此默认值</div></slot>

  1. 具名插槽

<slot name ="back"><p>默认返回</p></slot>
<cpn><button slot="back">返回</button></cpn>

  1. 作用域插槽 slot-scope
    用来在父组件中获取子组件的数据。
    父组件替换插槽的标签，但是数据内容由子组件来提供
    父：此处的template在2.5.XX以上的版本中可任意标签 eg: div p 
     <div>
    <cpn> 
         <template slot-scope = "slot">
             <div v-for="let item in slot.data">
                 {{item.name}}
             </div>
         </template>  
     </cpn> 
 </div>

子： 此处动态绑定属性 data为自定义的名字 

<template>
    <p>标题</p>
    <slot :data="items"></slot>  
</template>

三、template 属性 和 el属性

当二者同时存在， template里的html会直接替换el挂载的内容

查看评论