vue组件间通讯，相互传递数据 插槽slot

一、父组件向子组件传递数据（利用子组件的props属性）

<div >
<parent-component></component>　

<template >>

var vm=new Vue({
el:"#app",
data:{},
methods:{},
components:{
"parent-component":{
data(){
return {
title:"我是父组件",
msg:"我是父组件数据"
}
},
template:"#parent-component",
components:{
"child-component":{
data(){
return {
title:"我是子组件",
msg:"我是子组件数据"
}
},
methods:{
change(){
this.msg=this.md; //此时将子组件属性md(md的属性值来自于父组件：msg)赋给子组件msg
}
},
props:[md],
template:"#child-component"
}
}
}
}
});

二、子组件向父组件传递数据

1.利用this.$emit('事件名称'，数据)向父组件广播数据

2.v-on监听接收数据

1 <div >
<parent-component></parent-component>
<template >>

1 var vm=new Vue({
2 　　el："#app",
data:{},
methods:{},
components:{
"parent-component":{
data(){
return {
title:"我是父组件",
msg:"我是父组件数据"
}
},
methods:{
get(msg){
this.msg=msg //接收子组件传递过来的数据
}
},
template:"#parent-component",
components:{
"child-component":{
data(){
return {
title:"我是子组件",
msg:"我是子组件数据"
}
},
methods:{
send(){
this.$emit("child-msg",this.msg);//将子组件的数据发射（广播）出去
}
},
template:"#child-component"
}
}
}
}
3 })

插槽--slot

<div >
        <aaa>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </aaa>
        <bbb>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </bbb>
        <ccc>
            <ul slot="ul-slot">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
            <ol slot="ol-slot">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ol>
        </ccc>
    </div>

    <template >
        <h3>welcome vue1</h3>
    </template>

    <template >
        <h3>welcome vue2</h3>
        <slot></slot>
    </template>

    <template >
        <slot name="ol-slot">这是默认的情况</slot>
        <slot name="ul-slot">这是默认的情况2</slot>
        <p>welcome vue</p>
    </template>

var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
                "aaa": {
                    template: "#aaa"
                },
                "bbb": {
                    template: "#bbb"
                },
                "ccc": {
                    template: "#ccc"
                }
            }
        })