vue父子组件通信props、$emit

vue父子组件通信props、$emit

通过props从父组件传递到子组件

    <script>
        // 1、创建父&子组件
        Vue.component('Parent',{
            // 3、子组件挂载到父组件上 通过自定义属性传递数据
            template:`
                <div>
                    <h3>我是父组件</h3>
                    <Child msg="云哥哥"></Child>
                </div>
            `,
            methods:{
            }
        });
        Vue.component('Child',{
            // 4、使用自定义属性(数据)
            template:`
                <div>
                    <h3>我是子组件</h3>
                    <h4>msg:{{msg}}</h4>
                </div>
            `,
            // 2、声明一个自定义属性
            props:['msg'],
        });
        var App = {
            template:`
                <Parent />
            `
        };
        new Vue({
            el:'#app',
            components:{
                App
            },
            template:`<App />`
        });
    </script>

vm.$emit( event, arg )
$emit 绑定一个自定义事件event，当这个这个语句被执行时，将参数arg传递给父组件，父组件通过v-on:event监听并获取参数。

    <script>
        // 1、创建父&子组件
        Vue.component('Parent',{
            data(){
                return{
                    data:''
                }
            },
            // 3、v-on：getData 监听并且获取数据
            template:`
                <div>
                    <h3>{{data}}</h3>
                    <Child msg="云哥哥" v-on:getData="showData"></Child>
                </div>
            `,
            methods:{
                // 4、对从子组件传过来的数据进行处理
                showData:function(value){
                    this.data = value;
                }
            }
        });
        Vue.component('Child',{
            template:`
                <div>
                    <h3>我是子组件</h3>
                    <h4>msg:{{msg}}</h4>
                </div>
            `,
            props:['msg'],
            // vm.$emit( event, arg )
            mounted:function(){
                // 2、绑定自定义事件event
                this.$emit('getData','子组件传递的数据')
            }
        });
        var App = {
            template:`
                <Parent />
            `
        };
        new Vue({
            el:'#app',
            components:{
                App
            },
            template:`<App />`
        });
    </script>