通过v-bind绑定的参数怎么在total中获取？

来源：4-2 父子组件间的数据传递

韶华_易逝

2019-11-26

我想通过计算属性去算total但是我不知道在computed中怎么去获取传给子组件的值

<!DOCTYPE html>
<html lang="zn">
<head>
  <meta charset="UTF-8">
  <title>父子组件间的数据传递</title>
  <script src='./vue.js'></script>
</head>
<body>
  <div id="app">
    <counter :count='0'></counter>
    <counter :count='1'></counter>
    <div>{{total}}</div>
  </div>
  
  <script>
    Vue.component('counter',{
      props: ['count'],
      template: '<div>{{count}}</div>'
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      computed: {
        total: function () {
          console.log()
        }
      }
    })
  </script>
</body>
</html>

写回答

2回答

土木火

2020-01-10

如果使用计算属性，应该用不到setter。
因为这里total只依赖countOne和countTwo，而不是外界传入一个值给total，这样没有意义。

total = countOne + countTwo，所以再两个<counter />组件中，更改对应的事件处理函数，点击传入countOne的组件时，只改变countOne的值；点击传入countTwo的组件时，只改变countTwo的值。这样total自然就会重新计算得出新的值。

所以重点应该是事件相关的内容。