计算属性的问题

来源：5-2 计算属性 VS 侦听属性（2）

我要学习去了

2021-11-18

黄老师，今天我自己写了一个demo，发现在computed里面写了get和set，我想通过set触发一个input事件，然后在父组件监听它，之后拿监听到的值在父组件进行赋值，赋值之后把该值放到子组件的slot插槽里面，发现这种操作，input框不能输入，但是如果不把该值放到子组件的slot中，而是平级放就没啥问题，不知道原因，麻烦帮忙看看，代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <test @input="test">
        <!--这样写不行，输入框输入不了指-->
        <span>{{message}}</span>
      </test>
      <!--但是这样就可以-->
      <!--<span>{{message}}</span>-->
    </div>
    <script>
      Vue.component("test", {
        data: function () {
          return {
            count: 0,
          };
        },
        template: `
            <div>
              <input type="text" v-model="str" />
              <slot></slot>
            </div>
          `,
        computed: {
          str: {
            get() {
              return "1";
            },
            set(val) {
              this.$emit("input", val);
            },
          },
        },
      });
      const app = new Vue({
        el: "#app",
        data() {
          return {
            message: "hello world",
          };
        },
        methods: {
          test(val) {
            this.message = val;
          },
        },
        components: {},
      });
    </script>
  </body>
</html>

写回答

1回答