我的日常学习笔记 18.05.08（Vue自定义事件）-CSDN博客

继续看Vue组件的内容（9点）

昨天晚上看了一下动态组件，总结一下：

组件里的动态切换，通过vue的component元素加一个is特性来实现：

文档写了两种：一种是一个变量，传组件名进去，组件是注册好的全局组件
第二种是，一个数组，里面是对象，每个对象有两个属性，一个name是组件名，一个template里面写组件模板。代码如下：

//模式一：已注册组件的名字

//模式二：一个组件的选项对象
<component
		:is="currentTab.component"
	></component>
<script type="text/javascript">
	var tabs = [
		{
			name:'Home',
			component:{
				template:'<div>Home component</div>'
			}
		},
		{
			name:'Posts',
			component:{
				template:'<div>Posts component</div>'
			}
		},
		{
			name:'Archive',
			component:{
				template:'<div>Archive component</div>'
			}
		},
	]

	new Vue({
		el:'#app',
		data:{
			currentTab:tabs[0],
			tabs:tabs
		}
	})
</script>
复制代码

自定义组件的v-model

input组件使用v-model绑定响应变量，在组件模板里的对应写法是怎样的呢？因为type=“text”的value是文本内容，而像多选、单选的组件，value值是布尔值，所以捏，在模板里的写法是下面这样式的：
```
Vue.component('base-checkbox',{
		model:{
			prop: 'checked',
			event: 'change'
		},
		props: {
			checked: Boolean
		},
		template:`
			<input type="checkbox"
					:checked="checked"
					@change="$emit('change', $event.target.checked)">
		`
	})

	new Vue({
		el:'#app',
		data:{
			lovingVue:true
		}
	})
复制代码
```
解释一下：v-model将一个值lovingVue传到了组件里，传到了组件里面一个prop里，这里是名为checked（验证一下类型是布尔值），必须声明的哦。然后当lovingVue的值改变的时候，组件就会有所反应。

组件里面checked属性的值，就是动态响应变量checked的值，是布尔值。当组件触发change事件，会触发父组件的change事件，传参是$event.target.checked，可以想象，这个值就是组件里多选框状态改变之后的布尔值。

将原生事件绑定到组件

为啥要这样呢，先讲一下出现这个需求的环境，现在呢有一个组件，里面有一个input元素，如果我想监听焦点事件，而这个input元素不是根元素，他外面还有一个元素，那么我直接在父组件里面的组件标签上面写监听，是触发不了的，而且不会报错哦~

Vue提供了一个$listeners属性，是一个对象，里面包含了作用到这个组件上的所有监听器，配合v-on="$listeners"使用，将所有的事件监听器指向这个组件的某个特定的子元素。看代码：

//为监听器创建一个计算属性
<div id="app">
	<base-input :label="label" @focus="doIt"></base-input>
</div>
<script type="text/javascript">
	Vue.component('base-input',{
		inheritAttrs: false,
		props: ['label', 'value'],
		computed:{
			inputListeners:function(){
				var vm = this;
				console.log(this.$listeners);
				//创建一个新的对象，包含原有的属性和新属性
				return Object.assign({},
					this.$listeners,
					{
						// 然后我们添加自定义监听器，
    					// 或覆写一些监听器的行为(input是一个事件)
						input:function(event){
							vm.$emit('input', event.target.value);
						}
					}
				)
			}
		},
		template:`
			<label>
				{{ label }}
				<input
					v-bind="$attrs"
					v-bind:value="value"
					v-on="inputListeners"
				>
			</label>
		`
	})

	new Vue({
		el:'#app',
		data:{
			label:'请点击'
		},
		methods:{
			doIt(){
				console.log('doSomething...')
			}
		}
	})
	
</script>
复制代码