老师，computed属性和ref不能一起用吗？

来源：4-1 使用组件的细节点

无敌打狗棒

2020-06-18

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_study</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <item ref="one"></item>
        <item ref="two"></item>
        <div @click="handleClick">{{total}}</div>
    </div>
    <!-- built files will be auto injected -->
  <script>
      Vue.component('item', {
         template: '<div @click="handleClick">{{number}}</div>',
         data () {
             return {
                 number: 0
             }
         },
          methods: {
             handleClick() {
                 this.number ++;
             }
          }
      });

      const vm = new Vue({
          el: '#app',
          // data: {
          //     total: 0
          // },
          methods: {
              handleClick() {
                  console.log(this.$refs.one.number);
              }
          },
          computed: {
              total: function () {
                  return this.$refs.one.number + this.$refs.two.number;
              }
          }
      })
  </script>
  </body>
</html>

好像这里的$refs.one是个undefined，还没有生产实例？

写回答

1回答