​如前所述​​​(​​vue组件属性(props)及私有数据data​​),vue组件中,props是组件公有属性,对外;data是组件的私有数据,对内。正因为props对外,由外部赋值,因此在组件内部,是只读的,即组件内部不适宜去改变这些元素的值。当然,改也可以改,但运行时刻会有告警。正如我们写一个函数,对于传入的参数,我们一般是只读对待的,极少会去修改它的值一样。当然,这只是一种编码约定,你硬是要改,也无话可说,改了就改了。

同时,props是在开发时,预先设置好,传给组件的。在运行过程中,这些设置是一锤子买卖,以后就不起作用了。假如我们想调用该组件的一个方法,而该方法又依赖于props,问题就出来了:props是旧的。

这个时候,组件开发过程中,应该将props与data相结合。在组件内部,应该依赖于data,而data的初始值来自于props:

组件

export default {
props: {
id: { default: 0 }
},
data () {
return {
myId: this.id //用props的id初始化
}
},
methods: {
pop (id) { // 供外部调用
this.myId = id
alert(this.id)
alert(this.myId)
}
}
}

调用组件:

<template>
<div>
<!-- 将变量id的值赋给组件的id属性,一锤子买卖 -->
<Pop ref="popWin" :id="id" />
</div>
</template>

<script>import Pop from './_pop.vue'

export default {
components: {
Pop
},
data () {
return {
id: 0
}
},
methods: {
showDetail (id) {//页面的id也是由外部传进来的,事先不可能知道
this.id = id //保存了id,但影响不了组件Pop
this.$refs.popWin.pop(id) // 调用Pop组件的方法,并传递id
}
}
}</script>

2021.07.22

还有另一种机制,就是子组件监控props里的属性,当该属性变化时,就触发,处理相应的逻辑。

流程是这样:父组件或页面,将通过变量传值给子组件的props,子组件监控props。如果父组件在运行过程中,想动态更改这个属性,那就更改自己的变量。由于有监控(watch)机制存在,子组件被触发。

父组件或页面

<template>
<div><Report ref="report1" :id="myId"/></div>
</template>

<script>
import Report from './_report.vue'
export default {
components: {
Report
},
data () {
return {
myId: 0,
}
},
methods: {
init (id) {
this.myId = id //改变id值
}
}
}
</script>

组件_report.vue:

<template>
<div>我是子组件,名曰谢康乐,一箭射双鹤</div>
</template>

<script>
export default{
watch: {
id (val) {
alert('id变了,我是不是应该做点什么?')
}
}
}
</script>

2021.07.23
监视比父组件调用子组件方法控制更为合理,耦合程度更低。你值得拥有。