vue的组件通信

标签：接收   span   default   改变   电商   默认值   本地   ice   rop   

组件通信大概分三种；

一，父子通信

父传子是在子组件中通过props来接收父组件传递过来的数据：

例如：
props: {
title: {
type: String, //检查接收的数据类型
default: ‘请输入标题‘, //设置如果没有传递数据时的默认值
required:true //必填项，不传递会报错提醒
}
}

通过添加sync属性配合$emit实现父子通讯的双向数据流：

父组件：
<header-com :title.sync="title" />

子组件：
this.$emit(‘update:title‘, ‘1906A‘)

子->父：$emit 通过事件派发机制

this.$emit(‘要派发的自定义事件名‘,要传递的值)

例如：

this.$emit(‘confirm‘, { name: this.name, price: this.price })
$parent:子组件直接父组件

$children：父组件直接调用子组件

ref：通过ref给dom元素或组件本身添加名称来实现

例如：
<mask-dialog ref="dialog" />

JS中通过this.$refs.名子访问
例如：this.$refs.dialog

二，兄弟通信

两个办法第一是bus通讯；

创建一个空的vue并导出

import Vue from ‘vue‘
const Bus = new Vue();

export default Bus;

在main.js中注入，

import Bus from ‘./utils/bus‘
// 挂载到Vue原型上
Vue.prototype.$bus = Bus;
实现派发和监听
A组件派发
this.$bus.$emit(‘up‘, this.str)

还可用vuex来实现通信效果

vuex一般用于：根据项目复杂程度，组件比较多，数据传递比较复杂，数据难于管理时，就会想到vuex,例如：电商，后台管理的项目

vuex他是vue中集中管理数据工具

先安装vuex：：：

npm install vuex --save
vuex中有着五大核心：
state：数据的厂库
actions：通常用于异步方法操作，但不会在这步改变state的值

mutations：

在actions中方法中通过commit(‘mutaions方法名‘,要传递的值);
注意：通常在muations中定义的方法名,并且mutions中代码都是同步操作

modules：

为了解决应用的所有状态会集中到一个比较大的对象的臃肿,管理复杂的问题
读取module中的数据状态

getters：是state的计算属性，一般在组件中使用

三，隔代通信

$attrs

$listeners

provide和inject:一般平时用不少，除非你要开发vue组件库时才会用上

provide () {
return {
msg: ‘hello,vuejs‘,
app: this
}
}

或
provide:{
msg: ‘hello,vuejs‘,
app: this
}
说的再俗气一点：用本地存储也可以实现上面的所有通讯方式

vue的组件通信

标签：接收   span   default   改变   电商   默认值   本地   ice   rop   

原文地址：https://www.cnblogs.com/mzj143/p/12940311.html