父组件
<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://img-blog.csdnimg.cn/b3f0048e4bb54c05ab70e5643f75bfc7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5piO5q-U5oiR5Y6J5a6z,size_20,color_FFFFFF,t_70,g_se,x_16)
值改变时:
![在这里插入图片描述](https://img-blog.csdnimg.cn/78d3841c305d4da8b25d0ad8e7e5ce49.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_5piO5q-U5oiR5Y6J5a6z,size_20,color_FFFFFF,t_70,g_se,x_16)