【vue回顾系列】21-常用的组件之间数据传递的方法

父向子（单向）

props

父组件中：

<zi-zujian xxx='字符串'></zi-zujian>
<zi-zujian :xxx="数组"></zi-zujian>
<zi-zujian :fn='Fn'></zi-zujian>

子组件中props接收：

props: ["xxx", "fn"], // 简写的方法，如果开启vue的强烈建议eslint模式就会提示不要这么写了

props:{
  xxx:{
    type: Array,
    default() { //数组为引用类型，所以要返回
      return []
    }
  },
  xxx:{
    type: String,
    default: ""
  },
  xxx:{
    type:Boolean,
    default: true
  },
  xxx: { // 传入一个函数相当于在子组件执行一个钩子函数
    type: Function,
   	default: function () { return true }
  },
}

注意一：如果对props某个值需要进行操作，最好通过监听的方式存储在一个data的变量中。如果是直接用或者在mounted等hook中存储在一个data的变量中，再去使用的话，如果该值在父组件中改变了，data中存储的值是不会改变的。

如果只是用来模板渲染不改动的话，那就没必要存储在data中了。

注意二：如果想传入一个class类名，内部组件用props去接然后:class用上的话，在外部组件必须用深度选择器去写样式。

<style lang="scss" scoped>
.container {
  ::v-deep .bababa {
    ...
  }
}
</style>

拓展：如果想把一个组件里的所有props变量传入子组件中，只需要<zi v-bind="$props" />

slot插槽

插槽的方式传递一个标签、{{}}、文字等进子组件，我这已经写了一篇文章----【vue回顾系列】04-slot插槽最良心的使用总结。

$parent（禁用）

注意：官方不推荐这样的写法。

在子组件中：

this.$parent.data数据  // 去修改父组件的数据是不会报错
this.$parent.方法

$attr与$Listener

适合父子孙的数据传递，而且也很方便

// 父组件
<template>
 	<child-b
      title="父组件传入"
      test="test"
      @handleClick="handleClick"
    />
</template>

// 子组件
<template>
 	<child-c
      v-bind="$attrs" 
      v-on="$listeners"
    />
</template>

// 孙组件
<template>
    <div >
	    <button @click="handleClick">点击</button>
	</div>
</template>

props: {

},
methods: {
  handleClick() {
    console.log(this.$attrs)
    this.$emit("handleClick");
  },
}

$attrs可以接收到除了props声明外的所有父级绑定的属性，当然不包括class和style。而且函数也能直接使用。

provide/inject（不推荐）

看我的文章：【vue回顾系列】09-provide/inject的学习，链式信息传递

---

子向父（单向）

单向传递 $emit

子组件中通过$emit('fn',xxx)

// 在js中
this.$emit('fn', a, b)
// 第一个参数，fn为自定义函数名，后面的参数是要传递的值

// 在html中
<div @click="$emit("fn", a, b)"></div>

// 还可以监视emit的触发事件
emits: {
	fn: ({
		a, b
	}) => {
		// ...做一些逻辑
	}
}

父组件中用方法接收

// 在子组件的标签中接收。用个方法接收，也可以不绑事件，直接写js
<zi-zujian @fn="Fn"></zi-zujian>

methods:{
    Fn(a, b){
      子组件传来的参数就可以在这里直接使用
   }
}

$ref获取

就是父组件通过子组件对象来拿到data和methods

在父组件中：

<zi-zujian ref='xxx'></zi-zujian>
this.$refs.xxx.data属性 // 就拿到了
this.$refs.xxx.子组件方法() // 就可以调用了

父子双向

sync

子组件中

this.$emit('update:xxx', false)

父组件中

<zi-zujian :xxx.sync="bbb"></zi-zujian>
// bbb是父组件的数据，只要bbb改变，子组件的xxx也会跟着改变

注意：一般不推荐双向数据传递，如果父子的数据是双向的，会出现问题；

单向数据流主要是vue 组件间传递数据是单向的，即数据总是由父组件传递给子组件，子组件在其内部维护自己的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做是为了组件间更好的维护。

在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以 vue 不推荐子组件修改父组件的数据；

v-model的自定义

【vue其他相关】怎么理解v-model，怎么自定义组件中改写它？

---

同级相传

bus

1 建立一个公共JS文件，内容就只有引入vue，实例化后导出：

import Vue from 'vue'
export default new Vue

原理应该是利用一个空的vue实例，去充当一个组件之间的连接，就像bus一样；

2 在发数据的同级组件中引入bus后：

bus.$emit('fn',xxx)

3 在收数据的同级组件中：

bus.$on('fn',(data)=>{
	// 注意：传来的数据被放在参数data中，需要重新赋值才能使用
	例如 this.data = data
})
bus.$on('fn',this.Fn)

4 注意组件销毁时一起销毁：

destroyed () { // 或在beforeDestroy中
	bus.$off('fn')  
	bus.$off('fn', this.Fn) 
}

其他没记录到的方法请见谅，可以去看官方的文档。

mitt第三方插件

去看官方文档吧。

vuex

【vue回顾系列】13-vuex的简单理解与使用

从路由中获取

例如有一个搜索框组件，与table组件需要数据共享。可以通过路由来传值。

http://wwww.xxx.com?search=你好

这样的好处是页面刷新了，可以从地址继续拿到当前状态