说到组件通讯大家一般都会想到,父传子、子传父、或者兄弟组件传参(Bus.js事件总线),
这三种我之前有发表过,还有不明白的可以去看一看:父传子、子传父、兄弟组件传参
除了这些其实还有好多可以实现组件传参的方法,下面为大家详细的介绍一下其他几种:
1、ref 传值
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例
通俗的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例
- 它的原理就是:在子组件上绑定一个 ref 属性,然后通过 $refs 可以调用子组件中的方法从而达到传值的目的。
- 在父组件中引入子组件并绑定 ref
<template>
<div class="home">
<button @click='sonObj'>发送</button>
<Son ref='son'></Son>
</div>
</template>
<script>
import Son from "../components/Son";
export default {
name: "Home",
components: { Son },
data() {
return {
obj:{
name:'张三',
age:18
}
};
},
methods: {
// 调用子组件中的方法并传入数据
sonObj() {
this.$refs.sonObj.getData(this.obj)
},
},
- 子组件定义方法接受数据
methods: {
getData(obj){
this.data= obj
}
2、localStorage 和 sessionStorage
本地存储其实大家都知道,可能太熟了会忘记了他们也可以实现组件传参。
- localStorage 和 sessionStorage 使用方法一样
// localStorage 和 sessionStorage 这俩使用方法一样
let obj = {
name: "张三",
age: 18,
};
// 这里要说的一点是因为本地存储只能存放字符串类型的,所以在存放之前要先转换成字符串
// 当然如果本来就是字符串类型的可以直接存放
window.localStorage.setItem("obj", JSON.stringify(obj));
在其他组件中获取:
// 因为我们存的是引用数据类型,所以获取的时候要把它转换成过来
let obj = JSON.parse(window.localStorage.getItem('obj'))
3、vuex
vuex的概念: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。
- 在vuex中定义好方法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
obj = {}
},
mutations: {
getObj(state,obj){
state.obj = obj
}
},
actions: {
},
modules: {
}
})
- 在要传递数据的组件中调用方法
let obj = {
name: "张三",
age: 18,
};
// 通过 this.$state.commit()调用,参数一:vuex中的方法名 参数二: 要传入的数据
this.$state.commit('getObj',obj)
- 在接受数据的组件中接受数据
// 可以直接使用
<template>
<div class="son">
<p>{{this.$store.state.obj.name}}</p>
</div>
</template>
// 也可以通过映射的方法映射过来使用
<template>
<div class="son">
<p>{{obj.name}}</p>
</div>
</template>
<script>
// 在这里引入Vuex
import { mapState } from 'vuex'
export default {
name: "Son",
props: {},
// state 和 getter在计算属性里解析,mutations 和 actions 在 methods 方法中解析
computed: {
...mapState(['obj'])
}
};
</script>
4、 $parent 和 $children (不推荐)
$children 是父组件的方法 :
当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。也就是说用$children的时候你要知道你想调用的是那个子组件,要通过的它的下标来找到相应的组件
$parent 是子组件中的方法:
$parent 都能够实现访问父组件的属性和方法,如果存在多级子组件,通过parent 访问得到的是它最近一级的父组件。
父组件代码:
- $children 有一个很坑的点就是不能在 created 钩子中调用,可以在 mounted 中调用
<template>
<div class="home">
<Son></Son>
</div>
</template>
<script>
import Son from "../components/Son";
export default {
name: "Home",
components: {
Son,
},
props: {},
data() {
return {
name: "Holl 父级",
};
},
mounted() {
console.log(this.$children[0].text); // 我是子级
},
},
};
</script>
子组件代码:
- 在子组件中通过$parent获取到父组件的数据可以直接使用
<template>
<div class="son">
<button @click="parent">我是子级点击</button>
<h2>{{$parent.name}}</h2> // Holl 父级
</div>
</template>
<script>
export default {
name: "Son",
props: {},
data() {
return {
text: "我是子级",
};
},
methods: {
parent(){
console.log(this.$parent.name);
}
},
};
未完待续。。。