vue组件之间相互传值的方式
我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发。Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一。而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。
但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题。在 vue 中组件之间的关系有:父子,兄弟,隔代。针对不同的关系,怎么实现数据传递,就是接下来要讲的。
一、父组件向子组件传值
父组件通过属性的方式向子组件传值,子组件通过 props 来接收。
// 父组件
<user-detail :myName="name" />
export default {
components: {
UserDetail
}
......
}
在子组件中使用props(可以是数组也可以是对象)接收即可。可以传多个属性。
// 子组件
export default {
props: ['myName']
}
/*
props: { myName: String } //这样指定传入的类型,如果类型不对会警告
props: { myName: [String, Number] } // 多个可能的类型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: {
childMsg: {
type: Array,
default: () => []
}
} // default指定默认值
如果 props 验证失败,会在控制台发出一个警告。
*/
子组件接收的父组件的值分为引用类型和普通类型两种:
普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)
引用类型:数组(Array)、对象(Object)
基于 vue 的单向数据流,即组件之间的数据是单向流通的,子组件是不允许直接对父组件传来的值进行修改的,所以应该避免这种直接修改父组件传过来的值的操作,否则控制台会报错。
-
如果传过来的值是简单数据类型,是可以在子组件中修改,也不会影响其他兄弟组件内同样调用了来自该父组件的值。
具体操作是可以先把传过来的值重新赋值给data中的一个变量,然后再更改那个变量。
// 子组件
export default {
props: ['myName'],
data() {
return {
name : this.myName // 把传过来的值赋值给新的变量
}
},
watch: {
myName(newVal) {
this.name = newVal //对父组件传过来的值进行监听,如果改变也对子组件内部的值进行改变
}
},
methods: {
changeName() {
this.name = 'Lily' // 这里修改的只是自己内部的值,就不会报错了
},
}
}
-
注:如果不使用 watch 来监听父组件传递的 myName 值,子组件中的 name 值是不会随着父组件的 myName 值进行改变,因为 data 中 name: this.myName 仅仅只是定义了一个初始值。
-
如果引用类型的值,当在子组件中修改后,父组件的也会修改,因其数据是公用的,其他同样引用了该值的子组件也会跟着被修改。可以理解成父