Vue Cli4.5x版本,v-model绑定组件指令,子组件无法直接访问:value,和通过input修改

本人直接上手了脚手架4.5版本,它的挂载方式是

createApp(App).use(store).use(router).mount('#app')

所以发现这个版本devtools打不开,后来了解到官方还未更新devtools,版本还不能贴切最新版本脚手架!

以往我们都知道(如下父组件中Template某部分)

  <component  v-model="text"></component>
  <component  :value="text" @input="text = arguments[0]"></component>

所以子组件可以通过computed计算属性进行子组件的数据双向绑定(如下子组件)

    <input  v-model="str" type="text">
computed: {
     
    str: {
     
      get () {
     
        return this.value
      },
      set (newVal) {
     
        this.$emit('input', newVal)
      }
    }
  }

这么优美的传递信息方式,我想用在项目中。
结果发现不可以,我发现子组件没有接收到this.value的内容(前提:props已经设定好),打印为undefind,而且子访问夫的input事件也并没有执行。所以,我觉得可能原理发生了变化(如下为子组件绑定后出现的怪异一幕)
在这里插入图片描述在这里插入代码片
在这里插入图片描述
所以找了半天发现要用v-model的新特性,v-model:nameProps
所以父组件改为

<StringInput v-model="default" ></StringInput> // 默认方式
<StringInput v-model:value="title" ></StringInput>

子组件的方式也要更改

  computed: {
     
    default: {
     
      get () {
     
        return this.modelValue // 默认接收方式
 
      },
      set (value) {
     
        this.$emit('update:modelValue', value) // 默认更新方式
      }
    },
    text: {
     
      get () {
     
        return this.value
      },
      set (value) {
     
        this.$emit('update:value', value)
      }
    }
  }

本次没有采用最新的compostionAPI,方便了解。

你可能感兴趣的:(Vue3,vue,html,javascript)