vue（8）：组件入门：自定义组件的 v-model

自定义组件的 v-model

组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

之前v-model属性一般都是用在form表单中，v-model的值是表单组件的value值。例如：

<div id="app">
	<form name="formInfo">
		你的爱好：
		<input type="checkbox" value="读书" v-model="formInfo" />读书
		<input type="checkbox" value="音乐" v-model="formInfo" />音乐
		<input type="checkbox" value="足球" v-model="formInfo" />足球
	</form>
	<p>我的爱好是：{{formInfo}}</p>
</div>
<script type="text/javascript">
new Vue({
	el: '#app',
	data: {
		formInfo: []
	}
})
</script>

但是如果在自定义的组件中使用v-model呢，比如这样

<runoob-input v-model="num"></runoob-input>

这还真没怎么注意，最近才发现竟然不知道😅

先看一下v-model的原理

<input v-model="parentData">
等价于
<input 
    :value="parentData"
    @input="parentData = $event.target.value"
>

大致意思是：绑定value属性和input事件，当触发input事件后，将值赋值给value

实例1：表单值是value的

<div id="app">
	<input-num v-model="num"></input-num>
	<p>输入的值是：{{num}}</p>
</div>
<script type="text/javascript">
Vue.component('input-num', {
	template: `
	<p>
	<input  type="text" ref="num" 
	:value="value" @input="$emit('input',$event.target.value)"/>
	</p>`,
	props: ['value']
})
new Vue({
	el: '#app',
	data: {
		num: 0
	}
})
</script>

表单值是checked

由于 v-model 默认传的是 value，不是 checked，所以对于对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。

<div id="app">
	<base-checkbox v-model="isShow"></base-checkbox>
	<p v-show="isShow">打上对号就显示</p>
</div>
<script type="text/javascript">
	Vue.component('base-checkbox', {
		template:`
		   <input
		       type="checkbox"
			   :checked="abc"
			   @change="$emit('change',$event.target.checked)"
		     >
		`,
		model:{
			prop:'abc',  //自定义属性名
			event:'change'  //自定义事件名
		},
		props:['abc']
	}),
	new Vue({
		el:'#app',
		data:{
			isShow:false
		}
	})
</script>

个人总结：

因为是v-model（双向绑定），子组件可以向父组件传参，父组件也可以向子组件传参。子向父时 要使用$emit，父向子时要使用props