vue中v-model父子组件通信
有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值。是怎么实现的呢?
实际上v-model 只是语法糖而已。
<input v-model="inputValue" /> <input v-bind:value="inputValue" v-on:input="inputValue= $event.target.value" />
实际上他们是一样的。
举个例子,父组件代码:
<template> <div id="demo"> <test-model v-model="inputValue"></test-model> <span>{{inputValue}}</span> </div> </template> <script> import testModel from 'src/components/testModel' export default { data(){ return{ inputValue: "inputValue" } }, components: { testModel, } } </script> <style lang="scss" scoped> </style>
子组件代码如下:
<template> <span> <input ref="input" :value="value" @input="$emit('ababab', $event.target.value)" > </span> </template> <script> export default { data(){ return{ } }, props: ["value"], model: { prop: 'value', //这个事件名可以随意写,它实际上是规定了子组件要更新父组件值需要注册的方法 event: 'ababab' } } </script> <style lang="scss" scoped> </style>
以上,就实现了子组件修改父组件v-model绑定的值。
它的原理是
1.展示:父组件v-model,子组件接收一个props值value,将它展示到子组件自己的input上。
2.改变:当子组件自身发生改变时,触发自身的input方法,然后触发父组件的事件方法,改变父组件的value,进而改变接收的props,实现自身展示的改变
例子中使用了model,官网是这样说的,实际上是为了单选框,复选框按钮等情况的时候,他们的值并不是value,而是checked,这种情况下,就需要写这个。例如:
model: { prop: 'checked', event: 'change' },
另外还有个
同步修饰符sync
<comp :foo.sync="bar"></comp>
它实际上就是
<comp :foo="bar" @update:foo="val => bar = val"></comp>
所以当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue)
好了,就这么多,记录一下。
好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。