vue知识点总结（二）

组件的通信

父子通信（传递数据）

• 在父组件中传入数据（父组件给子组件传递数据）
  找到父组件标签，通过给父组件标签添加属性的形式传递数据，数据就是自定义的数据名（为了子组件接受），属性值就是传递的数据
  <chikd 自定义 属性名=‘传递的数据源’>
• 需要在子组件注册中接受数据，通过Porps属性接受
  在子组件注册中，使用Props属性接受数据,接受的数据名就是父组件中的自定义属性名props：[父组件自定义属性名]
• 在子组件的模板中使用数据
  在子组件的末班中template 中使用接受的数据，使用的是props中接受的名字

<div id="app">
    <!-- 传递静态数据  -->
    <child a='hello'></child>
</div>

 Vue.component('child',{
    //  组件模板 组件的HTML结构
    template:`
        <p>hello {{a}}</p>
    `,
    props:['a']
})

子父通信

子父听信需要借助于事件惊醒传递:emit()和on

子组件中通过$emit()触发自定义事件事件，传递子组件的数据
在父组件中 通过 $on() 监听子组件的自定义事件，接受数据
子父通信的步骤：

• 1.在子组件的模板template 中 某个元素上绑定一个原生事件，出发事件处理程序，在该事件处理程序中 通过$emit（）触发自定义事件，并传入第二个参数（就是传递的数据）

Vue.component('SlideBar', {
    template:'<div><em @click="sendMsg">world</em></div>',
    data(){
        return {
            childMsg:'子组件的信息'
        }
    },
    methods:{
        // 事件处理程序
        sendMsg(){
            // 触发自定义事件
            this.$emit('child:send', this.childMsg)
        }
    }
})

• 2.在父组件中进行监听：通过v-on监听子组件的自定义事件，然后触发父组件的methods中的方法

<div id="app">
    <slide-bar v-on:child:send='getMsg'></slide-bar>
</div>

const app = new Vue({
    el:'#app',
    data:{
        msg:'父组件传递数据'
    },
    methods:{
        // 父组件的methods中的方法
        getMsg(data){
            // data 就是子组件传递的数据
            console.log(data);
        }
    }
})

组件标签和普通标签的区别

区别1：添加属性

• 1.给普通标签（html标签）添加属性，就是给标签添加属性
• 2.给组件标签加属性，那就意味着需要通过props进行接收，实际就是传递数据（实现父子通讯）

区别2：绑定事件

• 1.给普通标签绑定事件，就是绑定的是原生事件，可以直接在methods中触发
• 2.给组件标签绑定事件，不管是什么事件名，就是绑定的是自定义事件，需要在组件内通过$emit（）触发，需要在父组件中监听执行\ast \ast <组件标签@自定义事件名="父组件得methods中的方法名"></组件标签>\ast \ast 绑定的事件药性被触发，必须在组内内部借助原生事件触发事件，在该事件中通过$emit()进行触发；如果要在组件标签上绑定原生事件，需要在事件后添加修饰符.native实现

props的传入数据类型

• 1.传入静态数据 默认传入的是字符串类型

<组件标签 title='hello'></组件标签>

• 2.传入数值或者布尔值 数组 等 通过 v-bind 进行绑定，
  即便对象 数组 数值 布尔 等是静态的，我们仍然需要 v-bind 来告诉 Vue 这是一个 JavaScript 表达式而不是一个字符串。

<组件标签 :title='[1,2,43,5]'></组件标签>
<组件标签 :title='{name:"tom", age:19}'></组件标签>
<!--  直接绑定对象名 -->
<组件标签 :title='ObjName'></组件标签>
<!--  传入一个对象所有的属性 -->
<组件标签 v-bind='ObjName'></组件标签>

插槽

插槽的作用是分发内容， 用于组件标签内插入内容， 通过slot标签分发内容， 用于组件模板内部

插槽的分类

• 默认插槽（匿名插槽）
• 具名插槽
• 作用域插槽
  可以给插槽添加默认内容（在slot标签内添加默认内容）： 如果用户传入内容，则使用用户传入，如果没有传入，使用默认内容渲染

默认插槽（匿名插槽）

• 定义插槽

Vue.component('Com1', {
    template:`
        <div>
            <button>COm1</button>   
            <slot>默认内容</slot>              
        </div>
    `,
})

• 使用插槽

 <com1>
     <!-- 使用默认插槽 -->
    <template >
        hello world
    </template>
    <!--  使用具名插槽 -->
    <template v-slot:header>
        <p> 段落</p>
    </template>
</com1>   

具名插槽

• 给 slot 标签 添加name属性

Vue.component('Com1', {
    template:`
        <div>
            <button>COm1</button>   
            <slot>默认内容</slot>
            <slot name='header'>具名插槽</slot>
                          
        </div>
    `,
})