父组件
<template>
<div style="margin-left:100px;">
<test1 :table="tableList" ref="Btn"></test1>
<input type="text" value="" v-model="tableList[0].name">
</div>
</template>
<script>
import test1 from '@/components/LayoutA/1230cs'
export default {
name:'test',
components:{test1},
props:{},
data(){
return{
tableList:[
{
id:"1",
name:"",
address:"山东"
}
],
}
},
}
</script>
子组件
<template>
<div style="margin-top:50px;">
<div>{{table}}</div>
</div>
</template>
<script>
export default {
name:'test1',
props:{
table:{
type:Array
},
},
data(){
return{
}
},
watch:{
table: {
handler: function (val) {
console.log("监听3")
console.log(val)
this.table2=val
},
immediate: true, --首次加载时执行监听
deep: true --值改变时执行监听
}
},
}
</script>
首次加载时:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2cf393d6aa9d8c3a4ef15c3ddbc30f69.png)
值改变时:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d5c771ec15f571e90f42fe9872ee3463.png)