第二十二节:带你梳理Vue2:Vue非父子组件间的传参

前言:

上面知识点的学习,让我们知道了, 数据在组件间的传递,

1. 父组件通过props属性将数据传递给子组件,
2. 子组件通过自定义事件将数据传递给父组件

那么问题来了,两个组件不是父子关系的组件,不是父子关系的 组件也可能有两种情况:

1. 一种是两个组件是有一个共同父组件的兄弟关系组件,
2. 第二种是两个组件之间没有太大的关系, 甚至要向上追溯好几层才能找到共同的祖先组件.

那么我们就来看看这两种情况,如何处理数据传递

1. 兄弟关系数据传递

兄弟关系拥有一个共同的父组件, 那么也就是说我们可以在父组件上定义一个数据,假如这两个组件的名称分别为A组件和B组件, 如果希望子组件A的数据传递给B组件,
那么我们可以先将子组件A的数据通过自定义事件将数据传递给父组件, 然后父组件再通过props将数据传递给B组件, 这样我们就达到了将A组件的数据传递给B组件的目标

示例: 将上面todoList示例拆分成两个组件

<div id="app">
    <!-- 使用组件 -->
    <first-component @addcomment="addComment"></first-component>
    <second-component 
                      :comments="comments" 
                      @deletecomment="deleteComment"
                      ></second-component>

</div>



<!-- 组件模板 -->
<template id="firstComponent">
    <div>
        <input type="text" v-model="comment">
        <button @click="handleClick">点击评论</button>
    </div>
</template>
<template id="secondComponent">
    <ul>
        <li v-for="comment,index in comments" :key="index">
            <span>{{comment}}</span>
            <button @click="deleteClick(index)">X</button>
        </li>
    </ul>
</template>

<script>



    //  组件选项对象
    let firstComponent = {
        template: `#firstComponent`,
        data(){
            return {
                comment: ''
            }
        },
        methods: {
            handleClick(){
                let comment = this.comment.trim();
                if(!comment)return
                this.$emit("addcomment", comment);
                this.comment = ''
            }
        }
    };

    let secondComponent = {
        props:["comments"],
        template: `#secondComponent`,
        methods:{
            deleteClick(index){
                this.$emit("deletecomment",index)
            }
        }
    }

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data:{
            comments: [] 
        },
        components: {
            secondComponent,
            firstComponent,
        },
        methods:{
            addComment(value){
                this.comments.push(value)
            },
            deleteComment(index){
                this.comments.splice(index,1)
            }
        }
    })

</script>

利用父组件来处理兄弟组件间的数据传递

2. Bus/总线/发布订阅模式

用于解决平级组件或者跨级组件之间的通信,因为如果全部用父子组件通信,有的不是父子组件就很繁琐,
所以我们利用一个公共的vue实例订阅和发布事件来达到不是父子组件间的通信

其实就是利用$emit() 方法触发自定义事件 和 $on() 监听自定义事件,给自定义事件添加事件处理函数

示例: 修改todoList

<template id="firstComponent">
    <div>
        <input type="text" v-model="comment">
        <button @click="handleClick">点击评论</button>
    </div>
</template>
<template id="secondComponent">
    <ul>
        <li v-for="comment,index in comments" :key="index">
            <span>{{comment}}</span>
            <button @click="deleteClick(index)">X</button>
        </li>
    </ul>
</template>

<script>
    // 定义一个负责通信的公共vue实例,除了负责组件之间的通信,没有任何实际意义
    let eventBus = new Vue();


    //  组件选项对象
    // 组件一
    let firstComponent = {
        template: `#firstComponent`,
        data(){
            return {
                comment: ''
            }
        },
        methods: {
            handleClick(){
                let comment = this.comment.trim();
                if(!comment)return
                eventBus.$emit("addcomment",comment)
                this.comment = ""
            }
        }
    };

    // 组件二
    let secondComponent = {
        template: `#secondComponent`,
        data(){
            return {
                comments: [] 
            }
        },
        // 创建组件的时候,监听自定义事件
        // 注意函数中的this
        created(){
            eventBus.$on("addcomment", (comment) =>{
                this.comments.push(comment)
            })
        },
        methods:{
            deleteClick(index){
                this.comments.splice(index,1)
            }
        }
    }


    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            secondComponent,
            firstComponent,
        }
    })

</script>

通过示例我们机会发现,我们不需要每次都将数据传来传去, 变得复杂.
发布/订阅模式很好的帮我们处理了非父子组件间的数据传递.

但是回头在思考一下, 我们需要每次都实例化一个vue来作为我们的总线吗?其实不需要, 如果每次都创建vue实例反而不好, 因为帮我们处理发布/订阅模式的总线一个就好, 那么我们可以如何处理呢,

其实我们可以将这个总线的vue实例绑定在Vue原型上, 这样在每个vue实例上都可以使用这个总线,

修改示例: 将这个用来处理传递数据的的vue实例,绑定到Vue构造函数的原型上

<div id="app">
    <!-- 使用组件 -->
    <first-component></first-component>
    <second-component></second-component>

</div>



<!-- 组件模板 -->
<template id="firstComponent">
    <div>
        <input type="text" v-model="comment">
        <button @click="handleClick">点击评论</button>
    </div>
</template>
<template id="secondComponent">
    <ul>
        <li v-for="comment,index in comments" :key="index">
            <span>{{comment}}</span>
            <button @click="deleteClick(index)">X</button>
        </li>
    </ul>
</template>

<script>
    // 将作为总线的vue实例绑定到构造函数上
    Vue.prototype.bus = new Vue();


    //  组件选项对象
    // 组件一
    let firstComponent = {
        template: `#firstComponent`,
        data(){
            return {
                comment: ''
            }
        },
        methods: {
            handleClick(){
                let comment = this.comment.trim();
                if(!comment)return
                this.bus.$emit("addcomment",comment)
                this.comment = ""
            }
        }
    };

    // 组件二
    let secondComponent = {
        template: `#secondComponent`,
        data(){
            return {
                comments: [] 
            }
        },
        // 创建组件的时候,监听自定义事件
        // 注意函数中的this
        created(){
            this.bus.$on("addcomment", (comment) =>{
                this.comments.push(comment)
            })
        },
        methods:{
            deleteClick(index){
                this.comments.splice(index,1)
            }
        }
    }

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            secondComponent,
            firstComponent,
        }
    })

</script>

除了以上$on监听事件外, 还有两个处理事件的方法:$once 和$off.

$once的行为与$on一样, 只不过是绑定的事件监听器只会执行一次, 在事件第一次触发完毕后会自动解除事件绑定

$off 方法则是用于移出一个事件监听器.

3. ref在组件上使用(利用ref处理父子通信)

之前我们讲过ref在普通的DOM元素上使用,获取的是DOM元素,但是如果ref在组件上使用,获取的是组件的实例,

通过ref,我们就可以实现在父组件中调用子组件的方法

<div id="app">
    <loading ref="load"></loading>
</div>

<template id="myalert">
    <div>
        <h2 v-show="flag">加载中...</h2>
    </div>
</template>

<script>
    const loading = {
        data() {
            return { flag: true }
        },
        template: '#myalert',
        methods: {
            hide() {
                this.flag = false;
            }
        }
    };

    var vm = new Vue({   // 根实例
        el: '#app',
        data: {
        },
        components: {
            loading
        },
        mounted() {
            // console.log(this.$refs.load)
            setTimeout(() => {
                this.$refs.load.hide()
            }, 2000)
        }
    });
</script>