组件之间数据交互，主要有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时，这时候能够经由过程事宜来通报。
