Vue.JS 使用 props 将计算值从根组件传递到子组件答案

【问题标题】：Vue.JS passing computed values from root to child component using propsVue.JS 使用 props 将计算值从根组件传递到子组件
【发布时间】：2019-02-05 14:23:32
【问题描述】：

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

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

此外，jquery dom 选择很奇怪，它有时会给我未定义的信息，有时它可以工作并突出显示单元格。

这是我的codepen

Vue.component('grid',{
  template:'#grid',
  props:['randval'],
  data:function(){
    return{
      title:"items",
      items:["A","B","C","D","E","F","G","H","I"]
    }
  },
  computed:{
    getValues:function(){ 
      $('.cells').removeClass('highlight');
      $('#cell_'+this.randval).addClass('highlight');
      console.log($('#cell_').text(), this.$refs.cell_1); // for example this return undefined sometime and works other times
      return this.randval;
    }
  } 
});

let app = new Vue({
  el:"#app",
  data:{
    val:0
  },
  methods:{
    randFun:function(){ 
      this.val = parseInt(Math.random()*10);
    }
  },
  computed:{
    watchVal:function(){ 
      return (this.val<9)?this.val:0;
    }  
  }
});

【问题讨论】：

标签： jquery dom vue.js components

【解决方案1】：

您可以使用v-bind:class

你也可以watch一个道具值。

computed: {
  getValues:function(){
    // ...
  }
},
watch: {
  randval(newVal, oldVal) {
    console.log('newVal: ', newVal);
    console.log('oldVal: ', oldVal);
  }
}

<li v-for="item, i in items" class="cells"
  :class="{ highlight: (i === randval) }">

Check in Codepen

【讨论】：

嘿，感谢您的回复，我知道这种方法，但我想知道如何使用我的方法来完成。这是一个演示代码，显然是更大的 sn-p 的一部分，我不能在这里分享，所以我想问是否可以用我的方法完成？
那么，您想要的具体方法是什么？
你想使用jQuery/getValues()/else吗？仅供参考：严禁使用 jQuery 直接更改 HTML，否则 Vue / virtual-dom 将无法正常工作！
我提到了两个问题，一个是我想通过 props 将计算值发送到子组件，但每次从根计算值时也要更新值。最好的方法是什么？
另一种是操作DOM，如果不是JQuery，那么正确的方法是什么？

【解决方案2】：

像这样更新组件，似乎这是更新道具并观看它们的唯一方法 -

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);  
    }
  }, 
});

【讨论】：

【解决方案3】：

您可以使用触发道具。更新触发道具后，我们可以从随机组件生成新的随机值。

Vue.component('grid',{
  template:'#grid',
  props:['randval'],
  data:function(){
    return{
      title:"items",
      items:["A","B","C","D","E","F","G","H","I"]
    }
  } 
});
Vue.component('random', {
  props: [
    'trigger',
    'min',
    'max'
  ],
    computed: {
    random() {
      this.trigger;
 return  Math.floor(Math.random() * (this.max - this.min + 1) + this.min);
    } },
  render() {
    return this.$scopedSlots.default({
      random: this.random
    });

  } 
});
let app = new Vue({
  el:"#app",
  data:{
    trigger:0
  },
  methods:{
    randFun:function(){
      this.trigger = this.trigger+1;
    }
  }
});

ul{
  list-style:none;
  margin:0;
  padding:0;
  font-family:'Roboto';
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

li{
  padding:10px;
  border:1px solid #aaa;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  justify-items:center;
}
li:hover{
  background:#eee;
}

.highlight{
  background:#7ed6df;
  color:#130f40;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <random v-slot="{random}" :trigger="trigger" max="9" min="1" >
  <grid v-bind:randval="random"></grid>
   </random>
  <button v-on:click="randFun">CLICK</button>
</div>
<script type="text/x-template" id="grid">
  <ul> 
    <li v-for="item, i in items" v-bind:id='"cell_"+i' v-bind:ref='"cell_"+i' class="cells" :class="{ highlight: (i === randval) }">
      <span>{{item}}</span><span>{{i}}</span>
    </li>
  </ul>
</script>

【讨论】：