vue组件传值

一,空实例组件通信

• code:./10.passValue.html

    <div id="app">
        <boss></boss>
        <brother></brother>
    </div>

    <template id="boss">
        <div>
            我是BOSS
            跟弟弟说话:
            <input type="text" v-model="speck">
        </div>
    </template>

    <template id="brother">
        <div>
            我是弟弟
            哥哥说的话:
            <input type="text" :value="msg">
        </div>
    </template>
    <script src="vue.js"></script>
    <script>

    var bus= new Vue();

    Vue.component("boss",{
        template:"#boss",
        data(){
            return {speck:""}
        },
        watch:{
            speck(el){                      //监听boss的话
                bus.$emit("pub",el);        //触发pub事件
            }
        }
    })
    Vue.component("brother",{
        template:"#brother",
        data(){
            return {msg:""}
        },
        mounted(){                          //渲染周期结束
            bus.$on("pub",(data)=>{         //监听pub事件
                this.msg=data;
            })
        }
    })
    var vm=new Vue({
        el:"#app"
    })
    </script>

二,父=>子组件通信

• code:./11.pToc.html

    <div id="app">

        <parent>
        </parent>

    </div>

    <template id="p">
        <div>
            父组件
            {{msg}}
            <!--  传递data,并使用子组件  -->
            <children :mess="msg"></children>
        </div>

    </template>
    <template id="c">
        <div>
            子组件
            <!-- 使用父组件给的data  -->
            {{mess}} 
        </div>
    </template>

    <script src="vue.js"></script>

    <script>
        Vue.component("parent",{
            template:"#p",
            data(){
               return {msg:"父组件的信息"} 
            },
            components:{
                children:{
                    template:"#c",
                    props:["mess"]      //接收父组件data
                }
            }
        })
    var vm=new Vue({
        el:"#app"
    })
    </script>