组件之间数据交互,主要有prop
和事件
两种。
prop
<!-- 父组件 -->
<template>
<child :id="id"></child>
</template>
<script>
export default {
data() {
return {
id: 1
}
},
ready() {
setTimeout(() => {
this.id = 2;
}, 1000);
}
}
</script>
<!-- child组件 -->
<template></template>
<script>
export default {
props: {
id: {
type: Number,
default: 0
}
},
data() {
return {}
},
methods: {
handler() { }
},
watch: {
//通过watch监听id的变化来执行methods
id() {
this.handler();
}
}
}
</script>
事件
<!-- 父组件 -->
<template>
<child :id="id"></child>
</template>
<script>
export default {
data() {
return {
id: 1
}
},
ready() {
setTimeout(() => {
this.$broadcast('child-set-data', {
id: 2
});
}, 1000);
}
}
</script>
<!-- child组件 -->
<template>
</template>
<script>
export default {
props: {
id: {
type: Number,
default: 0
}
},
data() {
return {}
},
methods: {
handler() { }
},
events: {
//通过events来接收父组件派发下来的事件来执行methods
child-set-data(o) {
this.handler();
}
}
}
</script>
那如何优雅的选择呢?
笔者觉得可以在数据功能上进行区分。
比如上面的场景,是由于子组件child在知道id改变后
,在它自己的作用域里去执行handler()方法
,handler可能是一个需要ajax获取数据并渲染到child组件上的函数(ajax在child组件中完成的),这时候就推荐用watch
来监听id的改变了。
如果handler所对应的ajax任务是在父组件完成的,父组件需要将拿到的一堆json数据传给child时
,这时可以通过事件
来传递。