vue 自定义组件使用v-model

Vue4年前 (2020)发布 小马大哥哥
942 0 0

v-model是 Vue2 中唯一支持双向绑定的指令,用于表单控件绑定,但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了,v-model其实是个语法糖。

<input v-model="something">

这不过是以下示例的语法糖:

<input v-bind:value="something"  v-on:input="something = $event.target.value">
//简写:<input :value="something"  @input="something = $event.target.value">

也就是说,你只需要在组件中声明一个name为value的props,并且通过触发input事件传入一个值,就能修改这个value。

//父组件中引用
{{title}}用来测试这里显示'111111',(测试1<myComponent v-model="title"></myComponent>
这里title是动态值,在data里可以自己设置默认值,假如这里我们设置为“111111//子组件
Vue.component('my-component', {
  template: `<div>
                {{value}}//用来测试,这里显示'111111',(测试2)
                <button @click="handleInput">按钮</button>
             </div>`,
  props: ['value'], //接收一个 value prop
  methods: {
    handleInput() {
      this.$emit('input', '222222'); //触发 input 事件,并传入新值
      //点击后(测试1)(测试2)的值均会变化成'222222'
    }
  }
});
我们来做一个组件内部控制关闭的弹窗
想一想,如果我们要绑定多个值的情况

如果绑定多个值的话,建议我们用object对象类型,Array数组类型,也就是说我们接收的value类型需要改变下。

//子组件
Vue.component('my-component', {
  template: `<div>
                {{value}}
                <button @click="handleInput">按钮</button>
             </div>`,
  props: {//这里我们换一种方法写,其实写成上边的 props: ['value']也是可以的
      value:{
         type: Object //设置验证类型为对象
      }
  },
  methods: {
    handleInput() {
      this.$emit('input', '222222');
    }
  }
});

props的验证类型建议也看看:props的验证类型

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...