Vue中父子及非父子组件之间的通信方法

最新推荐文章于 2024-01-29 13:03:28 发布

三倍速坑爹

最新推荐文章于 2024-01-29 13:03:28 发布

阅读量590

点赞数 1

文章标签： Vue 组件通信学习笔记前端 javascript

本文链接：https://blog.csdn.net/sanbeisuk/article/details/101419638

版权

Vue中父子及非父子组件之间的通信方法

父子组件之间的通信方法

父级->子级通信 (依赖单向数据绑定+props实现)

    Vue.component('Father', { //注册了含有data属性的父组件
        template: '#father',
        data () {
            return {
                val : 100,
                sav : 555
            }
        },
    });

	Vue.component('Son', { //注册了没有data的子组件
        template: '#son',
    });

可见，父级中有val、sav两条数据，如果其子组件可以使用自身的数据，首先需要的就是在子组件内部添加props属性

	Vue.component('Son', {
        template: '#son',
 		//props：[数组内可有一个或多个参数]       
        props: ['val','sav']//props声明即表示该组件会使用父组件的数据
    });

为了语义化提升代码的可读性，推荐将参数名与父组件的属性名相同。

在渲染模板上将相应的参数名绑定在子组件上即可：

    <template id="father">
        <div>
            <h4>我是父组件</h4>
            <hr>
            <!-- 将父组件数据分别绑定在props中声明的参数上 -->
            <!-- :props参数名 = '父组件数据' -->
            <Son :val = 'val' :sav = 'sav'></Son>
        </div>
    </template>
    <template id="son">
            <h4>我是子组件,我拿到了父组件的val：{{val}},以及：{{sav}}</h4>
    </template>

浏览器中结果如下：
在这里插入图片描述

子级 -> 父级通信 (依赖自定义事件)

和父子通信依靠props属性不同，在子父通信中我们需要使用自定义事件的方法。

Vue中的自定义事件

不同于点击事件、监听事件等等依托一个特定媒介去触发事件内部函数方法，

自定义事件依靠this.$emit()触发事件，例如：

<!-- 通过v-on事件绑定，我们在该标签上绑定了一个自定义方法test -->
<my-component v-on:test="any"></my-component>
//使用this.$emit()触发事件
this.$emit('test')

需要注意的是，Vue文档中提示自定义事件的事件名会在DOM模板中被自动转换为小写。

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

使用自定义事件实现子父通信

在父组件中设置自定义事件（父组件内部定义了一个byson方法）

    Vue.component('Father', {
        template: '#father',
        data () {
            return {
                val : 100,
                sav : 555
            }
        },
        methods: {
            byson ( val ) { //定义方法
                this.val = val;
            }
        }
    });

DOM模板中设定自定义事件，为了更好区分关系自定义事件名设置为’bysons’

    <template id="father">
        <div>
            <input type="text" v-model = 'val'>
            <h4>我是父组件</h4>
            <hr>
<!-- 在父组件中的子组件上绑定自定义事件byson1,这样就可以在点击事件触发时通过											this.$emit()调用方法 -->
            <Son @bysons = 'byson'></Son>
        </div>
    </template>

子组件中设定事件触发这个自定义事件(这里使用的是点击事件)

    Vue.component('Son', {
        template: '#son',
        data() {
            return {
                son: 669
            }
        },
        methods: {
            press() {
   //this.$emit('时间名',可选参数) 此处将子组件私有的son作为参数传递给父组件
                this.$emit('byson1', this.son);
            }
        },
        props: ['getFather', 'getSav']
    });

将点击事件绑定在子组件后，即可实现子->父通信功能，逻辑如下：

父组件中设定自定义事件 -> 子组件设置点击事件，执行触发父组件中的自定义事件。

非父子组件之间的通信

通过ref链实现

ref是什么

在Vue实例对象下有一个refs属性，其内容包含了所以作用域内组件的具体信息，利用ref实现非父子组件通信的核心逻辑就是通过操作$refs作为一个中间件来进行数据交换。

简单例子：通过点击事件改变一个非父子关系组件的样式

<body>
    <div id="app">
        <button @click = "getP">get</button>
        <p ref = "box"> 123 </p>  //在标签中添加ref = 'name'来添加标识
        <p ref > 123 </p>
        <Hello ref = "hello"></Hello>
    </div>
</body>
<script>
    Vue.component('Hello',{
        template: '<div></div>',
        data () {
            return {
                money: 1000
            }
        }
    })
    new Vue({
        el: '#app',
        methods: {
            getP () {
                //通过refs操作box的样式
                this.$refs.box.style.background = 'red'
            }
        }
    })
</script>

refs的特点：除了对组件有效，$refs对DOM元素也有效，但是它的性能较差，不推荐使用。

更方便高效的思路 — 事件总线

因为$refs性能低下的问题，所以产生了另外一条思路：将数据托管在一个公共（全局属性）的中间件上，这样无论是不是存在父子关系都可以访问的到其内部的数据。

如何实现？

全局定义一个公共的Vue实例对象bus，用于存储数据
利用自定义事件发布和触发，实现通信

下面例子中，通过中间件bus，实现了非父子组件之间数据的交换：

<body>
    <div id="app">
        <key-in></key-in>
        <print-out></print-out>
    </div>
    <template id="in">
        <!-- 和add属性双向绑定 -->
        <input type="text" v-model="add" @keyup.enter="addNew" />
    </template>
    <template id="out">
        <ul>
            <li v-for="item in lists">{{ item.text }}</li>
        </ul>
    </template>
</body>
<script src="../../lib/vue.js"></script>
<script>
    // bus事件总线思维： 将new Vue() 的实例作为全局变量，用来联通非父子组件
    var bus = new Vue();
    //注册组件
    Vue.component("keyIn", {
        template: "#in",
        data() {
            return {
                add: ""
            };
        },
        methods: {
            addNew() {
                //触发bus上的自定义事件pushIn
                bus.$emit("pushIn", this.add);
                this.add = "";
            }
        }
    });
    //输出组件上绑定有一个数据数组用于渲染列表
    Vue.component("printOut", {
        template: "#out",
        data() {
            return {
                lists: [{
                    id: 1,
                    text: "测试"
                }]
            };
        },
        mounted() {
            //保存指向该组件的this指针
            var _this = this;
            // $on关键词设定bus上的自定义事件，将新数据push进数组中
            bus.$on("pushIn", function (val) {
                var list = {
                    id: _this.lists.length + 1,
                    text: val
                };
                _this.lists.push(list);
            });
        }
    });
    new Vue({
        el: "#app"
    });
</script>

三倍速坑爹

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中父子及非父子组件之间的通信方法

Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data属性的父组件 template: '#father', data () { return { val :...
复制链接

扫一扫