Vue2.0系列（四）Vue 组件及父子组件通信

作者: 范小饭_ | 来源:发表于2017-12-09 11:13 被阅读122次

Vue2.0系列（四）Vue 组件及父子组件通信
Vue相关知识点
Vue如何实现组件通信？
Vue组件通信方式
Vue事件总线（EventBus）
vue2中eventbus遇到的坑
Vue事件总线（EventBus）使用详细介绍
vue2.0—父子通信
VUE - EventBus
vue组件间通信的一些实用方法（VUE2.x）

什么是组件？

vue中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘，键盘，鼠标），它就是一个具有独立逻辑或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。

页面就是由一个个类似这样的部分组成的，比如导航，列表，弹窗，下拉列表等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西。

使用组件的好处？

1、提高开发效率
2、方便重复使用
3、简化调试步骤
4、提升整个项目的可维护性
5、便于协同开发

vue中的组件

vue中的组件是一个自定义标签，vue.js的编译器为它添加特殊功能
vue中的组件也可以扩展原生的html元素，封装可重用的代码

组件的基本组成：样式结构，行为逻辑，数据

注册组件

全局注册

可以在任何模板中使用，使用之前要先注册
语法：使用Vue.compontent(组件名，选项对象)
组件名命名约定：驼峰，烤串
在html中使用组件：使用烤串命名法

例如，注册Vue.compontent('my-compontent',{}),使用的时候<my-compontent></my-compontent>

<div id="app">
        <h2>自定义下拉框</h2>
        <cus-list></cus-list>
        <cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
    // 全局注册组件
    Vue.component('cus-list',{
        data(){
            return {
                
            }
        },
        template:`
            <section>
                <div>
                    <div>
                        <input type="text">
                        <input type="button" name="" value="">
                        <span></span>
                    </div>
                </div>
            </section>
        `
    })
    new Vue({
        el:"#app",
        data:{
            
        }
    })
</script>

使用的时候，只要在页面上召唤这个组件就可使用，并且可以复用。

组件.png

局部注册

在组件实例中通过选项对象注册，只在所注册的作用域中使用

<div id="app">
       <h2>自定义下拉框</h2>
       <cus-list></cus-list>
       <cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
   new Vue({
       el:"#app",
       components:{
           'cus-list':{
               template:`
                   <section>
                       <div>
                           <div>
                               <input type="text">
                               <input type="button" name="" value="">
                               <span></span>
                           </div>
                       </div>
                   </section>
               `
           }
       },
       data:{
           
       }
   })
</script>

局部注册的组件，只有在当前实例的作用域中才可以使用，在作用域中也可以复用，效果如下。

组件.png

父子组件间通信

父组件给子组件通信

父组件===》子组件（用props）

组件实例的作用域是孤立的，不能再子组件直接用父组件的数据。
可以在组件上使用自定义属性绑定数据，在组件中组要显示的用props生命自定义属性名。

也就是记住一句话，父组件给子组件传值得时候，就是调用组件时给组件添加一个属性，然后在组件内用props接收即可，组件内根据属性名即可使用。

<div id="app">
    <h2>自定义下拉框</h2>
    <cus-list btn-value="查询"></cus-list>
    <cus-list btn-value="搜索"></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
    Vue.component('cus-list',{
        data(){

        },
        props:['btnValue'],
        template:`
            <section>
                <div>
                    <div>
                        <input type="text">
                        <input type="button" name="" :value="btnValue">
                        <span></span>
                    </div>
                </div>
            </section>
        `
    })
    new Vue({
        el:"#app",
        data:{
            
        }
    })
</script>

页面效果

props传值.png

子组件给父组件通信

子组件===》父组件

需要用到自定义时间，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。

1、在子组件中定义事件内容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>
2、父组件中v-on自定义事件进行接收v-on:receive="changeValue"
3、在触发子组件事件的时候，$emit 通知父组件 this.$emit("receive",item);
4、父组件根据自定义事件进行相应反馈
changeValue:function(value){this.val = value;}

看如下案例，点击input的时候，出现下拉列表框，选中相应的列表，列表内容出现在input框中。

    <div id="app">
        <h2>自定义下拉框</h2>
        <cus-list select-Value="搜索" v-bind:list="list1" >
        </cus-list>
    </div>
    <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
    <script type="text/javascript">
    // 全局注册组件
    Vue.component('cus-list',{
        data(){
            return {
                selectShow:false,
                val:''
            }
        },
        props:['selectValue','list'],
        template:`
            <section>
                <div>
                    <div>
                        <input type="text" @click="selectShow = !selectShow" :value="val">
                        <input type="button" name="" :value="selectValue">
                    </div>
                    <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
                </div>
            </section>
        `,
        methods:{
            changeValue:function(value){
                this.val = value;
            }
        }
    })
    Vue.component('list-li',{
        props:['list'],
        template:`
                <ul>
                    <li v-for="item of list" @click="clickLi(item)">{{item}}</li>
                </ul>
        `,
        methods:{
            clickLi:function(item){
                this.$emit("receive",item);
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            list1:['宋仲基','余文乐','鹿晗','陈小春','黄晓明','易烊千玺']
        }
    })
    </script>

页面效果