VUE之组件（组件细节、模块系统、v-model语法糖）

H5编码规范

<!-- html代码 -->
		<div id="demo">
			<table>
				<tbody>
					<row></row>
					
				</tbody>
			</table>
		</div>
<!-- vue代码 -->
	<script type="text/javascript">
		Vue.component('row',{
			template:`
				<tr><td>2</td><td>2</td></tr>`
		})
		var demo=new Vue({
			el:"#demo",
		})
	</script>

根据上代码分析结果如下：
H5规范中要求，table里为tbody，tbody里需要放置tr和td，否则会将代码解析到table外。
方案：
这里，tbody中放置的是row，所以会解析到table同级外部，解决方案为is属性。既然tbody里只能放置tr，那么这里便改成tr+is属性
代码如下：

<!-- html代码 -->
		<div id="demo">
			<table>
				<tbody>
					<tr is="row"></tr>
				</tbody>
			</table>
		</div>
<!-- vue代码 -->
	<script type="text/javascript">
		Vue.component('row',{
			template:`
				<tr><td>2</td><td>2</td></tr>`
		})
		var demo=new Vue({
			el:"#demo",
		})
	</script>

template组件模板写法

写法一：直接写在选项里的模板
直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。

<!-- vue代码 -->
	<script type="text/javascript">
		Vue.component('row', {
			template: `
				<tr><td>2</td><td>2</td></tr>`
		})
		var demo = new Vue({
			el: "#demo",
		})
	</script>

注意：这里需要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键
写法二：写在template标签里的模板
这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。

<!-- html代码 -->
		<div id="demo">
			<my-content></my-content>
		</div>
		<template id="arry">
			<h3>这是一个内容</h3>
		</template>
<!-- vue代码 -->
	<script type="text/javascript">
		Vue.component('my-content', {
			template: `#arry`
		})
		var demo = new Vue({
			el: "#demo",
		})
	</script>

注意：这里需要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键

写法三：写在script标签text/x-template里的模板
这种写模板的方法，可以让模板文件从外部引入。

<!-- html代码 -->
		<div id="demo">
			<my-content></my-content>
		</div>
<!-- vue代码 -->
	<script type="text/x-template" id="arry">
		<h3>这是一个内容123</h3>
	</script>
	
	<script type="text/javascript">
		Vue.component('my-content', {
			template: `#arry`
		})
		var demo = new Vue({
			el: "#demo",
		})
	</script>

注意：这里要注意下模板的位置

组件data

在使用 data 和实例稍有区别， 组件的data必须是函数，且必须将数据 return出去。

组件名

在注册一个组件的时候，始终需要给它一个名字。比如在全局注册的时候，该组件名就是 Vue.component 的第一个参数
注意：
（1）命名注意“语义化”：即你给予组件的名字可能依赖于你打算拿它来做什么
（2）定义组件名的方式3种

组件注册

（1）全局注册案例

<!-- html代码 -->
		<div id="arry">
			<grand></grand>
		</div>
<!-- Vue代码 -->
	<script type="text/javascript">
		Vue.component("grand",{
			template:`<div>我是外祖父<father></father></div>`
		})
		Vue.component("father",{
			template:`<div>我是爸爸<son></son></div>`
		})
		Vue.component("son",{
			template:`<div>我是孙子</div>`
		})
		
		var arry=new Vue({
			el:"#arry",
		})
	</script>

全局组件“嵌套性”：在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

（2）局部注册

缘由：全局注册往往是不够理想的，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的JS的无谓的增加。
在这些情况下，你可以通过一个普通的 JS对象来定义组件。

自定义事件

正如之前所讲，子组件→父组件
当子组件需要向父组件传递数据时，需要用到自定义事件。
Vue 组件有一套观察者模式，子组件用 $emit()来触发事件，父组件用$on()来监听子组件的事件

语法结构：
父组件通过v-on:eventName="parentEventName"来设置监听
子组件通过$.emit(‘eventName’)来触发事件。

（1）子组件触发事件$.emit(‘eventName’,option)

<!-- html代码 -->
		<div id="demo">
			父亲有{{moneyValue}}
			<my-money :money="moneyValue" @change-parent='changeMoney'></my-money>
		</div>
	// vue代码
		Vue.component("my-money", {
			props: {
				money: Number
			},
			data() {
				return {
					childMoney: this.money
				}
			},
			template: `
				<div>
				     <h2 @click="cut">我继承了{{childMoney}}</h2>
				</div>
			`,
			methods: {
				cut() {
					this.childMoney -= 100;
					this.$emit('change-parent', this.childMoney)
				}
			}
		})
		var app = new Vue({
			el: "#demo",
			data: {
				moneyValue: 600
			},
			methods: {
				changeMoney(option) {
					console.log(option)
					this.moneyValue = option;
				}
			}

		})

.sync修饰符

在vue2.4以前，父组件向子组件传值用props；子组件不能直接更改父组件传入的值，需要通过$emit触发自定义事件，通知父组件改变后的值，如此才能实现父子组件的通信。
过程比较繁琐，写法如下：

ync修饰符：
vue2.4以后的写法明显舒服许多，上面同样的功能，直接上代码

写法上简化了一部分，很明显父组件不用再定义方法检测值变化了。其实只是对以前的$emit方式的一种缩写，.sync其实就是在父组件定义了一update:value方法，来监听子组件修改值的事件。

v-model语法糖

首先来回顾下v-model相关知识点。

（1）v-model指令是什么?
vue通过v-model实现双向绑定数据，所以首先我们要明白v-model在这个过程中做了什么。
（2）v-model指令本质？
有vue基础的同学应该知道，v-model本质是一个语法糖。
即v-bind和v-on的结合体。

（3）v-model本质验证
表单元素比如input，v-bind绑定一个值，就把data数据传给了value，同时再通过v-on监听input事件，当表单数据改变的时候，也会把值传给data数据，代码如下
（4）v-model等效写法

综上所述，v-model为v-on和v-bind结合体

自定义组件之v-model

代码解析：
前面说了，父子组件传值通过prop和$emit

第一步：父组件把num通过prop传给了子组件，但要注意，这里的子组件可以给prop取了一个别名，例如叫做value作为区分，所以子组件的props对象中的键为取的别名value。如果没有设置别名，则直接使用即可
第二步：当子组件input值改变的时候，子组件监听了一个oninput方法，注意这里也给$emit中的事件取了一个别名，只不过这个别名和原来的名字一样oninput，input值改变后，通过$emit提交input事件并把新值传给父组件，又要注意->$emit的荷载为字符串
案例2：对上述案例做下调整，修改事件类型event为blur失焦时触发，代码如下

此时，不再是实时输入触发数据更新，而是输入框失焦时更新数据。

案例3：
正如官方文档所说：像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的，model 选项可以用来避免这样的冲突。
接下来修改model默认项，如下所示
有任何问题可以随时联系小编