组件的使用

1.构建组件（使用 is 方法）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<table>
			<tbody>
				<row></row>
				<row></row>
				<row></row>
			</tbody>
		</table>
		
	</div>	
	<script>
	Vue.component('row',{
		template:'<tr><td>this is a row </td></tr>'
	})
		var vm = new Vue({
			el:'#root'
		})
	</script>
</body>
</html>

输出：虽然显示正确，但是在控制台可以看到，<tr> 本应该在 <table> 中，却和 <table> 平级了，因为 H5 语法规定，<tbody>中

必须包含 <tr>；

初识 Vue（14）---（组件使用中的注意点）

修改代码：将 <row></row> 修改为 <tr is="row"></tr>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件的使用</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<table>
			<tbody>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
			</tbody>
		</table>
		
	</div>	
	<script>
	Vue.component('row',{
		template:'<tr><td>this is a row </td></tr>'
	})
		var vm = new Vue({
			el:'#root'
		})
	</script>
</body>
</html>

输出：使用 is ；这样既实现了组件的功能，也可以符合 H5 的语法

初识 Vue（14）---（组件使用中的注意点）

同理可得：<ol> 中的 <li> 和 <select> 中的 <option> 都推荐此方法

        <table>
			<ol>
				<li is="row"></li>
			</ol>
		</table>

		<table>
			<select>
				<option is="row"></li>
			</select>
		</table>

2.data 在子组件中的定义

错误写法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<table>
			<tbody>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
			</tbody>
		</table>		
	</div>	
	<script>
	Vue.component('row',{
		data:{
			content:'this is a row'
		}, 
		template:'<tr><td>{{content}}</td></tr>'
	})
		var vm = new Vue({
			el:'#root'
		})
	</script>
</body>
</html>

报错：data 在根组件中可以这样定义，写在 Var vm = new Vue里面是正确的，但写在 Vue.component 子组件中错误

修正代码：子组件定义data时，后面必须跟函数，不能跟对象；因为子组件会调用多次，为了和其他子组件不产生冲突，每个子组件都能拥有自己独立的数据存储，防止子组件之间互相影响；故后面只能跟函数。改为

data:function(){
            return{
                content:'this is a row'
            }

输出：

初识 Vue（14）---（组件使用中的注意点）

3.Vue 中操作 DOM

Vue 不建议在代码中操作 DOM，但在处理一些极其复杂的动画效果时，只依靠 Vue 的数据绑定无法处理，在某些情况下不得不操作 DOM；通过 ref 引用的形式来获取 DOM。进行 DOM 操作；

功能：点击 DIV ，将其中内容打印出来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div 
			ref='hello'
			@click="handleClick"
		>
			hello world
		</div>	
	</div>	
	<script>
		var vm = new Vue({
			el:'#root',
			methods:{
				handleClick:function(){
					alert(this.$refs.hello.innerHTML) 
// 在整个Vue实例里面所有的引用中取hello这个引用（对应DIV的DOM节点）
				}
			}
		})
	</script>
</body>
</html>

输出：点击 hello world ，打印输出 hello world

初识 Vue（14）---（组件使用中的注意点）

4.计数器（点击一次就加一）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<counter></counter>
		<counter></counter>
	</div>	
	<script>
		Vue.component('counter',{
			template:'<div @click="handleClick">{{number}}</div>',
			data:function(){
				return{
					number:0
				}
			},
			methods:{
				handleClick:function(){
					this.number++
				}

			}
		})
			var vm = new Vue({
				el:'#root',
		});
	</script>
</body>
</html>

输出：每点击一次就加一

初识 Vue（14）---（组件使用中的注意点）

添加计数功能（合计上下两个数的更改次数）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<counter ref="one" @change="handleChange"></counter>
		<counter ref="two" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>	
	<script>
		Vue.component('counter',{
			template:'<div @click="handleClick">{{number}}</div>',
			data:function(){
				return{
					number:0
				}
			},
			methods:{
				handleClick:function(){
					this.number++
					this.$emit('change')  
					//子组件向父组件传值，监听change 事件
				}

			}
		})
			var vm = new Vue({
				el:'#root',
				data:{
					total:0
				},
				methods:{
					handleChange:function(){
						this.total = this.$refs.one.number + 
						this.$refs.two.number
					}
				}
		});
	</script>
</body>
</html>

输出：第三行为前两行改变次数之和

初识 Vue（14）---（组件使用中的注意点）

ref:写在 DIV 标签里的时候，通过 this.$refs.名称实际上是标签获取的元素；

通过组件写 ref 时，通过 this.$refs.名称，实际是 counter 子组件的引用

组件的使用

1.构建组件（使用 is 方法）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<table>
			<tbody>
				<row></row>
				<row></row>
				<row></row>
			</tbody>
		</table>
		
	</div>	
	<script>
	Vue.component('row',{
		template:'<tr><td>this is a row </td></tr>'
	})
		var vm = new Vue({
			el:'#root'
		})
	</script>
</body>
</html>

输出：虽然显示正确，但是在控制台可以看到，<tr> 本应该在 <table> 中，却和 <table> 平级了，因为 H5 语法规定，<tbody>中

必须包含 <tr>；

初识 Vue（14）---（组件使用中的注意点）

修改代码：将 <row></row> 修改为 <tr is="row"></tr>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件的使用</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<table>
			<tbody>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
			</tbody>
		</table>
		
	</div>	
	<script>
	Vue.component('row',{
		template:'<tr><td>this is a row </td></tr>'
	})
		var vm = new Vue({
			el:'#root'
		})
	</script>
</body>
</html>

输出：使用 is ；这样既实现了组件的功能，也可以符合 H5 的语法

初识 Vue（14）---（组件使用中的注意点）

同理可得：<ol> 中的 <li> 和 <select> 中的 <option> 都推荐此方法

        <table>
			<ol>
				<li is="row"></li>
			</ol>
		</table>

		<table>
			<select>
				<option is="row"></li>
			</select>
		</table>

2.data 在子组件中的定义

错误写法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<table>
			<tbody>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
			</tbody>
		</table>		
	</div>	
	<script>
	Vue.component('row',{
		data:{
			content:'this is a row'
		}, 
		template:'<tr><td>{{content}}</td></tr>'
	})
		var vm = new Vue({
			el:'#root'
		})
	</script>
</body>
</html>

报错：data 在根组件中可以这样定义，写在 Var vm = new Vue里面是正确的，但写在 Vue.component 子组件中错误

data:function(){
            return{
                content:'this is a row'
            }

输出：

初识 Vue（14）---（组件使用中的注意点）

3.Vue 中操作 DOM

功能：点击 DIV ，将其中内容打印出来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div 
			ref='hello'
			@click="handleClick"
		>
			hello world
		</div>	
	</div>	
	<script>
		var vm = new Vue({
			el:'#root',
			methods:{
				handleClick:function(){
					alert(this.$refs.hello.innerHTML) 
// 在整个Vue实例里面所有的引用中取hello这个引用（对应DIV的DOM节点）
				}
			}
		})
	</script>
</body>
</html>

输出：点击 hello world ，打印输出 hello world

初识 Vue（14）---（组件使用中的注意点）

4.计数器（点击一次就加一）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<counter></counter>
		<counter></counter>
	</div>	
	<script>
		Vue.component('counter',{
			template:'<div @click="handleClick">{{number}}</div>',
			data:function(){
				return{
					number:0
				}
			},
			methods:{
				handleClick:function(){
					this.number++
				}

			}
		})
			var vm = new Vue({
				el:'#root',
		});
	</script>
</body>
</html>

输出：每点击一次就加一

初识 Vue（14）---（组件使用中的注意点）

添加计数功能（合计上下两个数的更改次数）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件使用中的注意点</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<counter ref="one" @change="handleChange"></counter>
		<counter ref="two" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>	
	<script>
		Vue.component('counter',{
			template:'<div @click="handleClick">{{number}}</div>',
			data:function(){
				return{
					number:0
				}
			},
			methods:{
				handleClick:function(){
					this.number++
					this.$emit('change')  
					//子组件向父组件传值，监听change 事件
				}

			}
		})
			var vm = new Vue({
				el:'#root',
				data:{
					total:0
				},
				methods:{
					handleChange:function(){
						this.total = this.$refs.one.number + 
						this.$refs.two.number
					}
				}
		});
	</script>
</body>
</html>

输出：第三行为前两行改变次数之和

初识 Vue（14）---（组件使用中的注意点）

ref:写在 DIV 标签里的时候，通过 this.$refs.名称实际上是标签获取的元素；

通过组件写 ref 时，通过 this.$refs.名称，实际是 counter 子组件的引用

初识 Vue（14）---（组件使用中的注意点）

组件的使用

1.构建组件（使用 is 方法）

2.data 在子组件中的定义

3.Vue 中操作 DOM

组件的使用

1.构建组件（使用 is 方法）

2.data 在子组件中的定义

3.Vue 中操作 DOM

相关推荐