vue组件通信总结

2019-07-13 admin

父组件 >> 子组建

使用prop 父组件Parent.vue

    <template>
        <div>
            <child :msg='toChildMsg'></child>
        </div>
    </template>
    export default {
        data() {
            return {
                toChildMsg: 'message',
            },
        },
    }

子组件Child.vue

    <template>
        <div>
            {{msg}}
        </div>
    </template>
    export default {
        props: {
            msg: String, // 这里是传递参数的类型
            default: '默认值', // 这里是默认值
        },
    }

子 >> 父

事件派发

子组件Child.vue

    <template>
        <div>
            <button @click='changeParentData'><button>
        </div>
    </template>
    export default {
        methods: {
            changeParentData() {
                this.$emit('change', '来自子组件的消息');
            },
        },
    }

父组件Parent.vue

    <template>
        <div>
            <child :change='changeData'></child>
        </div>
    </template>
    export default {
        data() {
            return {
                parentData: '',
            },
        },
        methods: {
            changeData(val) {
                // val是子组件传递过来的值
                this.parentData = val; // 事件派发修改data
            },
        },
    }

当然每次为了修改一条数据就定义一个方法有点繁琐,Vue在2.4+的版本中加了一个语法糖 .sync修饰符

下面放用法 子组件Child.vue

    <template>
        <div>
            <button @click='changeParentData'><button>
        </div>
    </template>
    export default {
        methods: {
            changeParentData() {
                this.$emit('update:parentData', '来自子组件的消息');
            },
        },
    }

父组件Parent.vue

    <template>
        <div>
            <child :parentData.sync='parentData'></child>
        </div>
    </template>
    export default {
        data() {
            return {
                parentData: '',
            },
        },
    }

父 >> 孙

使用provideinject

祖先组件Parent.vue,这里我们将父组件的vue实例对象传递出去

    export default {
        provide() {
            return {
                pVue: this,
            };
        },
        data() {
            return: {
                pMsg: '祖先组件data',
            }
        }
    };

子孙组件Grandson.vue,接受祖先组件的实例对象,就可以使用Parent.vue中的方法和数据了

    <template>
        <div>
            {{pVue.pMsg}}
        </div>
    </template>
    export default {
        inject: ['pVue'],
    };

两两不相关的组件

通过事件总线来传递参数main.js中定义一个传递参数的中间件$bus

main.js

    const bus = new Vue();
    Vue.prototype.$bus = bus;

A.vue

    <template>
        <div>
            <button @click="change">改变B组件的参数</button>
        </div>
    </template>
    export default {
        methods: {
            change() {
                this.$bus.$emit('changeB', '修改B组件的参数');
            }
        }
    };

B.vue

    export default {
        data() {
            return {
                data: '等待被修改',
            };
        },
        created() {
            // 监听change事件修改组件内部的参数
            this.$bus.$on('changeB', msg => {
                this.data =  msg;
            })
        }
    };

当然如果有很多数据需要维护,不停的依靠组件通信也是一件不太优雅的事情,这个时候就可以依赖vuex,当我们仅仅需要简单的通信,以上的方法就可以解决大部分问题.

[转载]原文链接:https://segmentfault.com/a/1190000019748110

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69593.html

文章标题:vue组件通信总结

相关文章
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
vue-video-player 更改视频源
背景:根据用户的信息来显示不同的视频源 &lt;template&gt; &lt;div class=&quot;video-box-wrap&quot; v-show=&quot;video.show&quot;&gt; ...
2018-05-05
回到顶部