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

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

<div id="app">
　　<parent-component></component>　
　　 
　　<template id="parent-component">
　　　　<h2>{{title}}-->{{msg}}</h2>
　　　　<child-component  :md="msg"></child-component>
　　</template>
　　
　　<template id="child-component">
　　　　<h2>{{title}}-->{{msg}}<h2>
　　　　<input type="button" value="获取父组件数据">
　　</template>
</div>

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监听接收数据

<div id="app">
　　<parent-component></parent-component>

　　<template id="parent-component">
　　　　<h3>{{title}}--->{{msg}}</h3>
　　　　<child-component @child-msg="get"></child-component>
　　</template>
　　<template id="child-component">
　　　　<h3>{{title}}--->{{msg}}</h3>
　　　　<input type="button" value="发送数据到父组件" @click="send">
　　</template>

　</div>

var vm=new Vue({
　　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"
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　}

})

 插槽--slot

<div id="app">
        <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 id="aaa">
        <h3>welcome vue1</h3>
    </template>

    <template id="bbb">
        <h3>welcome vue2</h3>
        <slot></slot>
    </template>

    <template id="ccc">
        <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"
                }
            }
        })