Vue 2.0学习笔记:不同场景下组件间的数据通讯

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

通过前面的学习,对于Vue中组件的数据交流有了一定的了解。实际上在Vue中不同场景之下组件之间的数据通讯是不一样的,在业务中常见的组件通讯的场景主要有父子组件之间的通讯、兄弟组件间的通讯和全局组件的通讯等三种。只不过全局组件的通讯不是我们这章要阐述的范围,他涉及到Vuex。接下来分别看看父子组件和兄弟组件之间的通讯方式和实现方法。

父子组件间的数据通讯

父子组件间的数据通讯可以分为:父组件传递数据给子组件子组件传递数据给父组件两种。

在《组件数据传递》一文中我们知道了,在Vue中,父组件传递数据给子组件时,可以通过props来完成。

上图简单的描述了,在Vue中父组件的数据通过props传递给子组件。具体示例如下:

子组件传递数据给父组件有两种方式:回调参数自定义事件。先来看回调函数的方式,如图:

简单的看一个小示例:

<div id="app">
    <h3>{{ parentComponentName }}</h3>
    <child :change-parent-component-name = "changeParentComponentName"></child>
</div>

<template id="child">
    <div>
        <button @click = "() => changeParentComponentName(newComponentName)">点击我</button>
    </div>
</template>


let parent = new Vue({
    el: '#app',
    data () {
        return {
            parentComponentName: 'w3cplus'
        }
    },
    methods: {
        changeParentComponentName: function (newComponentName) {
            this.parentComponentName = newComponentName
        }
    },
    components: {
        'child': {
            template: '#child',
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/component-data-and-props-part3.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部