组件间的通信

组件间的通信

    //组件之间的通信传值
            //父组件给子组件传值
                   1.用属性传  在子组件中用props定义属性 props:['属性名']
            //子组件给父组件传值
                   1.用方法传   $emit('事件')
            //兄弟组件之间的传值


    2.4.1：父组件给子组件传值
        <script>
            Vue.component('pa',{
                template:`
                    <div>
                            <h1>我是父组件</h1>
                            <my v-bind:txt="msg"></my>
                    </div>

                `,
                data:function(){
                    return{
                        msg:'我是父组件中的数据，要传给给子组件'
                    }
                }
            })
            
            Vue.component('my',{
                //传一个属性
                props:['txt'],
                template:`
                <div>
                        <h1>我是子组件</h1>
                        <p>{{txt}}</p>
                </div>
                `
            })



            new Vue({
                el:"#app"
            })
        </script>


        vue实例给组件传值
         <script>
            Vue.component('pr',{
                props:['txt'],
                template:`
                    <div>
                        <h1>{{txt}}</h1>
                    </div>
                
                `
            })

            new Vue({
                el:"#app",
                data:{
                    msg:'hello vue'
                }
            })