VUE专题(三)组件之间的传值(父传子,子传父)

vue

今天我来讲一下vue组件之间的传值。
组件实例的作用域是孤立的。
这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
可以使用 props 把数据传给子组件。
先说一下场景:
我在App.vue中引用serList组件,现在他们父子关系。
这是我在App.vue中的代码

 <serList class="serListPad"  :services="services" @services-change="servicesChange"></serList>

serList 是在components中定义好的

import serList from './components/ser_list.vue';
components: {
serList
}

services也是在data中定义好的

import service from './components/service.vue';
data () {
return {
services: [service],
}
}

我现在用bind的方式把我想要传给子组件的值给传过去,:services=”services”,: 是bind的缩写。
现在我们来注意看子组件serList.vue:
父组件传过来的值子组件要用props接收

 props: ['services']

我们接收过来的这个值怎么使用呢?
我们可以直接像data中的数据一样,用this.services,也可以像我一样再data中再定义一个新的data当做桥梁

data () {
return {
myServices: this.services
}
}

到目前为止,父传子就是这样的
现在讲一下子传父:
vue2.0中可以使用$emit来向父组件派发事件,父组件中用$on来监听自定义的事件

watch: {
services(val) {
this.myServices = val;
},
myServices(val) {
this.$emit('services-change', val);
console.log('打印myServices');
console.log(this.myServices);
}
},

在services中监听一下变化,然后把最新的变化赋值给myServices
同样mySercices的变化也要通知父级
‘sercices-change’自定义事件传递给父级,父级接收到这个事件,然后执行具体的方法。

 <serList class="serListPad"  :services="services" @services-change="servicesChange"></serList>

然后在methods中定义servicesChange方法

servicesChange (val) {
this.services = val;
}

这些就是我目前用到的传值。
欢迎交流。

vue交流群
IT文库 » VUE专题(三)组件之间的传值(父传子,子传父)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址