Vue.js 我想关注子组件中父组件的值 我有一个父组件，它将用户选择的选项卡发送到 子组件 我想查看父级传递的值 子组件中的组件 我确信标签页的价值 将根据父零部件选择进行更改

在这段代码中，控制台不起作用

子组件

props: {
    tab: ''
},
data: function () {
    return 
        tabs: this.tab,
    };
},
watch: {
     tabs: function () {
         console.log('tabs', this.tabs);
     },
},

父组件

props: {
    tab: ''
},
data: function () {
    return 
        tabs: this.tab,
    };
},
watch: {
     tabs: function () {
         console.log('tabs', this.tabs);
     },
},

中的

选项卡

属性只取初始值，我建议使用计算属性而不是数据：

props: {
    tab: ''
},
computed:{
    tabs(){
     return this.tab;
   }
},
watch: {
     tabs: function () {
         console.log('tabs', this.tabs);
     },
},

或者你可以直接观看道具：

props: {
    tab: ''
},

watch: {
     tab: function () {
         console.log('tab', this.tab);
     },
},

注意不应使用HTML本机元素作为vue组件，如

表

如果道具是对象或阵列，则应添加

deep

选项，如：

props: {
    tab: ''
},
computed:{
    tabs(){
     return this.tab;
   }
},
watch: {
     tabs:{
      handler: function () {
         console.log('tabs', this.tabs);
     },
    deep:true
    }
},

另一种方法

props: {
    tab: {
    type: Number,
    default: 0
  }
},
data() {
    return {
        tabs: this.tab,
    };
},
watch: {
     tab(newVal) {
         this.tabs = newVal;
         console.log('tabs', newVal);
     },
},

---

很抱歉，我使用了此方法，但仍然无法获取控制台值是否替换父组件中的本机元素“table”？是否确定父组件中的值是否正在更改？是的，我在父组件中更改了另一个名称我在子组件的单击事件中放置了相同的控制台，当我切换父组件中的选项卡并单击子组件中的事件时，我将获得不同的选项卡值，但在watch函数中，我无法获得控制台值。我得到相同的结果，我的选项卡值只是三个数字0、1和2中的一个更改

选项卡：“”

到

选项卡：编号

对不起，我得到了相同的结果，我尝试了这个，我在子组件的click事件中放置了相同的控制台，我可以在控制台中获得值，但在watch函数中不起作用