web前端 -- vue -- vue 中非父子组件通讯办法

时间 2019-11-30

标签 web 前端 vue 中非父子组件通讯办法栏目 HTML 繁體版

原文原文链接

根据千峰教育学习视频所练习的笔记 | 学习一段时间，我也有写一点东西的必要了···html

vue中除了父子组件外，还能遇到非父子组件的通讯，有如下两种方法能解决。

1. 空实例与自定义事件

我先在<div>里面写两个组件，<dear-feifei>和<dear-zhangliuping>，这两个组件就是非父子组件的关系。如今我想在在<dear-zhangliuping>进行了一些操做，怎样能将数据传入到<dear-feifei>当中。

1.1. 先来康康大体的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 非父子组件通讯</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <dear-feifei></dear-feifei>
    <dear-zhangliuping></dear-zhangliuping>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        components:{
            'dear-feifei':{
                template:'<h2>{{message}}</h2>',
                data:function () {
                    return{
                        message:'hello feifei'
                    };
                },
            },
            'dear-zhangliuping':{
                template:'<ul><li v-for="item in list">{{item}}</li></ul>',
                data:function () {
                    return{
                        list:['哈哈','呵呵','吼吼']
                    };
                },
            }
        }
    });
</script>
</body>
</html>

1.2. 接着咱们来看如何来交互

我须要到<dear-zhangliuping>组件中添加一个事件：

template:'<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>',

而后咱们到下边写个methods添加刚才写的 getContent 方法。咱们要用这个方法获得内容，并想办法传入到<dear-feifei>里面。咱们还需在开头建立一个空实例，就能够调用这个实例的 $emit 添加自定义事件来进行触发

var busVm = new Vue(); //定义空实例
<script>
······
'dear-zhangliuping':{
    template:'<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>',
    data:function () {
        return{
            list:['哈哈','呵呵','吼吼']
        };
    },
    methods:{
        getContent:function (ev) {
            busVm.$emit('changeEvents',ev.target.innerHTML);
        }
    }
    ······
</script>

1.3. 如今已经能够发布了，但咱们怎么在另外一个组件里订阅呢？

咱们能够在<dear-feifei>里面经过生命周期进行订阅，用mounted。在里面用 $on 来接收事件。

<script>
'dear-feifei':{
    template:'<h2>{{message}}</h2>',
    data:function () {
        return{
            message:'hello feifei'
        };
    },
    mounted:function () {//用于接收分发过来的数据
        busVm.$on('changeEvents',function (str) {
            console.log(str);
        });
    }
},
</script>

如今点击 list 里的内容，就能看到数据能传输了：

咱们如何对 message 进行修改

mounted:function () {
    busVm.$on('changeEvents',function (str) {
        console.log(str);
        this.message = str;
        <!-- this 指向busVM这个对象，要去修正，以指向dear-feifei -->
    }.bind(this));//绑定之后就指向dear-feifei了
}

这样就完成了非父子组件通讯vue

1.4. 总结：
咱们先定义一个空实例，而后在想要传输数据的位置进行一个 $emit 触发
在想要接收的位置，用 $on 的方式进行接收，造成一个发布与订阅的模式，来实现数据的交互，就完成了非父子组件的通讯vuex

2. vuex 状态管理

上面的方法能解决简单的项目，但稍微复杂一点的项目咱们就用vuex的方法了app

我先在<div>容器里写两个组件

<div id="app">
    <div>{{count}}</div>
    <addbtn></addbtn>
    <removebtn></removebtn>
</div>
<script>
    var busVm = new Vue();
    var vm = new Vue({
        el:'#app',
        data:{
            count:0
        },
        components:{
            'addbtn':{
                template:'<button >+</button>',
            },
            'removebtn':{
                template:'<button >-</button>',
            }
        }
    });
</script>

2.1. 渲染结果就是上图这样子的啦，如今我想经过点击按钮来实现加减的处理

能够发现这两个组件是共享这个 count，这个时候就涉及到非父子组件的通讯了。我能够利用 props 传输数据，而后在组件里挂载，使数据既能够传到 addbtn 中又能传到 removebtn 这两个组件中。而后再去 props 中接收 key 值

<div id="app">
    <addbtn :count="count"></addbtn>
    <removebtn :count="count"></removebtn>
</div>
<script>
components:{
    ·····
    'addbtn':{
        template:'<button >+</button>',
        props:['count'],
</script>

2.2. 那我能够添加一个方法到组件中，使得点击的时候触发一下，接着把发布功能完善

<script>
    ······
        components:{
            'addbtn':{
                template:'<button @click="setCount">+</button>',
                props:['count'],
                methods:{
                    setCount:function () {
                        busVm.$emit('changeEvents',this.count+1);
                    }
                }
            },
            'removebtn':{
                template:'<button @click="setCount">-</button>',
                props:['count'],
                methods:{
                    setCount:function () {
                        busVm.$emit('changeEvents',this.count-1);
                    }
                }
            }
        }
    });
</script>

2.3. 发布已经写好了，咱们仍是用 mounted 进行订阅

var busVm = new Vue(); //定义空实例
    var vm = new Vue({
        el:'#app',
        data:{
            count:0
        },
        mounted:function(){
            busVm.$on('changeEvents',function (num) {
                this.count = num;
            }.bind(this));
        },

如今就已经完成了

web前端 -- vue -- vue 中非父子组件通讯办法

vue中除了父子组件外，还能遇到非父子组件的通讯，有如下两种方法能解决。

1. 空实例与自定义事件

1.1. 先来康康大体的代码：

1.2. 接着咱们来看如何来交互

1.3. 如今已经能够发布了，但咱们怎么在另外一个组件里订阅呢？

1.4. 总结：

2. vuex 状态管理

2.1. 渲染结果就是上图这样子的啦，如今我想经过点击按钮来实现加减的处理

2.2. 那我能够添加一个方法到组件中，使得点击的时候触发一下，接着把发布功能完善

2.3. 发布已经写好了，咱们仍是用 mounted 进行订阅