Jquery Vue.JS使用道具将计算值从根组件传递到子组件

所以我有一个演示应用程序，在其中我通过根中的计算属性生成一个随机数，并使用道具将该计算值传递给子组件

每当我在单击时生成随机值时，我无法找出更新子组件中的值的正确方法

另外，jQueryDOM选择很奇怪，它有时会给我未定义的，有时会工作并突出显示单元格

这是我的

Vue.component（'grid'{
模板：“#网格”，
道具：['randval']，
数据：函数（）{
返回{
标题：“物品”，
项目：[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”、“I”]
}
},
计算：{
getValues:function（）{
$（'.cells'）.removeClass（'highlight'）；
$（'#cell'+this.randval）.addClass（'highlight'）；
console.log（$（'#cell_35;'）.text（），this.$refs.cell_1）；//例如，此函数有时返回未定义的值，有时则有效
返回此文件。randval；
}
} 
});
让应用程序=新Vue({
el:“应用程序”，
数据：{
瓦尔：0
},
方法：{
randFun:function（）{
this.val=parseInt（Math.random（）*10）；
}
},
计算：{
watchVal:function（）{
return（this.val您可以使用

您还可以
观看
道具值


计算：{
getValues:function（）{
// ...
}
},
观察：{
兰德瓦尔（新瓦尔，旧瓦尔）{
log（'newVal:'，newVal）；
log（'oldVal:'，oldVal）；
}
}
：class=“{highlight:（i==randval）}”>
像这样更新组件，似乎这是更新道具并观看道具的唯一方法-

Vue.component('grid',{
  template:'#grid',
  props:['randval'],
  data:function(){
    return{
      title:"items",
      items:["A","B","C","D","E","F","G","H","I"],
      final:0
    }
  },
  watch: {
    randval:function(){   
      this.final = this.randval;
      console.log('watching randvals-->',this.randval);  
    }
  }, 
});

您可以使用触发器属性。在更新触发器属性时，我们可以从随机组件生成新的随机值


Vue.component（'grid'{
模板：“#网格”，
道具：['randval']，
数据：函数（）{
返回{
标题：“物品”，
项目：[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”、“I”]
}
} 
});
Vue.组件（“随机”{
道具：[
“触发器”，
"敏",，
“马克斯”
],
计算：{
随机的{
这是一个触发器；
返回Math.floor（Math.random（）*（this.max-this.min+1）+this.min）；
} },
render（）{
返回此值。$scopedSlots.default({
随机的：这个，随机的
});
} 
});
让应用程序=新Vue({
el:“应用程序”，
数据：{
触发器：0
},
方法：{
randFun:function（）{
this.trigger=this.trigger+1；
}
}
})；
ul{
列表样式：无；
保证金：0；
填充：0；
字体系列：'Roboto'；
显示：网格；
网格模板列：重复（3,1fr）；
}
李{
填充：10px；
边框：1px实心#aaa；
显示：网格；
网格模板柱：1fr 1fr；
对齐项目：居中；
证明项目：中心；
}
李：悬停{
背景：#eee；
}
.亮点{
背景：7ed6df；
颜色：#130f40；
}

点击


{{item}}{{i}}


嘿，谢谢你的回复，我知道这种方法，但我想知道如何使用我的方法完成。这是一个演示代码，显然是更大片段的一部分，我不能在这里分享，所以我想问，是否可以使用我的方法完成？那么，你想要的确切方法是什么？你想使用jQuery/getValues（）吗/else？仅供参考：严格禁止使用jQuery或其他方式直接更改HTML，如果是这样，那么Vue/虚拟dom将无法完美工作！我提到了两个问题，一个是我想通过道具将计算值发送到子组件，但每次我从根计算值时都会更新值。最好的方法是什么？另一个是她的一个方法是操作DOM，如果不是JQuery，那么正确的方法是什么？
Vue.component('grid',{
  template:'#grid',
  props:['randval'],
  data:function(){
    return{
      title:"items",
      items:["A","B","C","D","E","F","G","H","I"],
      final:0
    }
  },
  watch: {
    randval:function(){   
      this.final = this.randval;
      console.log('watching randvals-->',this.randval);  
    }
  }, 
});