在 [上一篇 v-model] 的学习过程中,
我们知道了,一般在两种场景下,我们会使用到 v-model.
- 使用在 input 表单元素上.
- 使用在组件上.
但是使用在 input 元素上和使用在组件上在某种程度上来说,还是有很大的区别的.
在 v-mode 使用在 input 元素上时, v-model 帮我们做了两件事情.
<input type='text' v-model="data" />
- 将 data 的值使用 :value 属性绑定的形式绑定到了 input 元素的 value 属性上.
- 在父组件内,自动提供了
@input的监听函数，仅此而已。
在组件上使用 v-model 时
<test-comp v-model="data"></test-comp>
- 将
data以props的形式传递到子组件内. - 子组件内定义
props:['dataFrompartent']来接收父组件通过v-model传过来的值。 - 子组件内部定义
model{prop:'dataFromParent',event:'fuckthisshitEvent'}来告知自己，父组件v-model传过来的值，在子组件内部要使用dataFromParent来接收。 子组件需要在改变父组件传递过来的值时，触发fuckthisshitEvent事件，并将需要改变的值传递出去（this.$emit('fuckthisshitEvent',e.target.value)）
很大的区别在于:
由于子组件,是一个组件.默认情况下v-model 能做的事情,仅仅只是默认传个 props.value 给你,以及在我父组件内部默认监听你子组件内部不知道是谁发布的 input 事件.
但是在子组件中,或者说在子组件中,可能有很多 input 元素.那到底是谁需要用到这个 v-model 传递过来的值呢？
比如 里面有 2 个 input(一个用户名,一个密码),一个 checkbox 等等等.
那么父组件通过 props 传递过来的数据给谁用的?(用户名,密码,还是 checkbox?)
监听谁的事件?((用户名和密码框都是 input ,checkbox 则是 change)
所以,在组件上使用 v-model,我们需要在被接受 v-model 的子组件内进行更细致的配置.
因为默认在使用 v-model 往子组件传递数据时,父组件只负责传递 :value="data" & 在自己内部监听子组件发布出来的 input 事件.
如何配置 v-model 传递的 props 名字以及父组件监听的事件呢?
为什么要会 v-model的 prop 和 event 配置呢?
prop 呢 ? 不就是把数据以 :value 的方式传递进去吗?而且应该是给 input 元素使用不是吗?
event 呢? 默认是父组件监听 input 事件. 这有什么不好吗? 传给输入框使用,本身就应该监听 input 事件呀?为什么要改默认监听的事件呢?
道理也很简单:
在表单元素中,咱们用到的最多的可能就是 input 文本框输入.
对于输入框(比如 text textarea) 来说,:value 默认传进去正好好.
- value 就是它们需要显示的内容.
- input 正好也是它们的 value 在改变时触发的事件...(虽然也要子组件自己监听 dom 再 $emit 一次).
关键在于,input 表单元素,不只有输入框,还有 checkbox select 等.
首先 ,它们的 value 和 input 一样,不是给用户看的(虽然都是往后台提交的)
并且, 它们作为 input 元素来说,自己状态改变时的事件也不全是 input,有的是 change，比如 select 元素.
所以, 如果一直使用 组件的 v-model 的默认配置(value & input)显然是不合适的.
比如,我有一个组件,内部是一个 <select></select>.
所以,默认的 props.value 和 input 事件就不合适.
因为 value 不需要我传,内部的 <select></select> 本身就定义了 options . 而 options 里包含了 value.
input 事件也不合适, 因为 <select></select> 事件是 change.
于是,我们需要在包含了 <select></select> 组件的内部重新定义 v-model 的两个默认配置.
const TestComp = {
model: {
prop: 'getDataFromParentByVModel', // 将默认的 value props 改成 getDataFromParentByVModel
event: 'change' // 让父组件默认监听 change 事件.
},
props: ['getDataFromParentByVModel']
}
- model.prop = 'getDataFromParentByVModel' 修改默认的 v-model 传递的属性绑定是 :value
- event = 'change' 让提供了 v-model 的父组件默认的监听子组件发布出去的 change 事件.
- props: ['getDataFromParentByVModel'] v-model 传递过来的是 getDataFromParentByVModel,在子组件内部还是得定义一下对应的 props (就想默认定义 props:['value']) 一样.
然后在子组件的内部:
let ChildComp = {
template: `
<div>
//....other html and components
<select :value="getDataFromParentByVModel" @change="hanlderSelectChange">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
`,
method: {
hanlderSelectChange (e) {
// 在这就要触发 change 事件了.
this.$emit('change',e.target.value)
}
}
}
查看效果:
两边修改可以互相影响(这也就是 v-model 的作用所在).
其实传统的像什么父子组件间传值.
- 父向子 使用 props .
- 子向父 使用 $emit ..
但是上述两种常规做法,都是单向的.
组件上使用 v-model 也可以作为一个非常好用的父和子之间相[互传递数]据的一种方式.(双向的.)
