Vue组件学习

根据Vue官方文档学习的笔记

在学习vue时，组件学习比较吃力，尤其是组件间的通信，所以总结一下，官方文档的组件部分。

注册组件

• 全局组件

语法如下，组件模板需要使用一个根标签包裹起来。data必须是一个方法

Vue.component('component-name',{
    template:'<div><h1>标题</h1><span>作者信息</span></div>',
    data(){
        return{
            message:'组件的属性'
        }
    },
    methods:{

    }
})

• 局部组件

var com = {
    template:'<div><h1>标题</h1><span>作者信息</span></div>',
    data(){
        return{
            message:'组件的属性'
        }
    },
    methods:{

    }
}

new Vue({
    components:{
        'compontent-name':com
    }
})

组件通信

• prop将父组件数据传给子组件

 <div id='app'>
     <child :msg=message></child>
 </div>

<script>
    Vue.component('child', {
        props: ['msg'],
        template: '<p>{{msg}}</p>'
    })

    new Vue({
        el: '#app',
        data: {
            message: '父组件数据'
        }
    })
</script>

利用子组件的props选项，父组件可以向子组件传递数据，但是子组件不能求改父组件的数据。

• 非父子组件通信

需要使用一个空的Vue实例来管理

<div id='app'>
    <com-a></com-a>
    <com-b></com-b>
</div>

var bus = new Vue();

var coma = {
    template: '<p @click="send">{{adata}}</p>',
    data(){
        return {
            adata: 'a的数据'
        }
    },
    methods:{
        send(){
            // 触发这一事件
            bus.$emit('data-to-b', this.adata);
        }
    }
    
};

var comb= {
    template: '<p>{{bdata}}</p>',
    data(){
        return {
            bdata: 'b的数据'
        }
    },
    mounted(){
        // 监听事件，获取a组件的数据，进行相关操作
        bus.$on('data-to-b', function (msg) {
            this.bdata = msg;
        }.bind(this));
    }
};

new Vue({
    el:'#app',
    components: {
        'com-a': coma,
        'com-b': comb
    }
})