10 Vue 使用组件过程需要注意的内容，子组件更新父组件实例

最新推荐文章于 2023-12-29 16:31:27 发布

技术~子云

最新推荐文章于 2023-12-29 16:31:27 发布

阅读量212

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/davice_li/article/details/127471620

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

这篇博客探讨了在Vue.js中使用组件时遇到的问题，如在表格中正确使用`is`属性来绑定组件。同时，强调了子组件定义数据时data必须为函数的原因，以及如何实现计数器功能，包括事件监听和数据传递。最后，展示了如何通过$emit和$refs实现子组件间通信，更新父组件状态。

摘要由CSDN通过智能技术生成

一、在表格中直接使用组件，结构会出现错误如下代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<table>
				<tbody>
					<!--使用模板template制作表格 在tr标签中加入  is 绑定row组件，在表格时使用-->
					<row></row>
					<row></row>
					<row></row>
				</tbody>
			</table>

		</div>

		<script type="text/javascript">
			Vue.component('row',{
				template:"<tr><td>this is a row </td></tr>"
			});
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

获得的结果如下图所示

tr 显示的结果并没有按我们的预期显示到 tbody标签里。这样显示是错误的。正确的这样写

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<table>
				<tbody>
					<!--使用模板template制作表格 在tr标签中加入  is 绑定row组件，在表格时使用-->
					<tr is="row"></tr>
					<tr is="row"></tr>
					<tr is="row"></tr>
				</tbody>
			</table>

		</div>

		<script type="text/javascript">
			Vue.component('row',{
				template:"<tr><td>this is a row </td></tr>"
			});
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

改造后的代码显示结果如下：

遇到以下几种情况都可以使用 is ="row" 在标签属性中来表示。像ul ol table selectf 标签中都可以使用

                <tbody>
					                                                                            <!--使用模板template制作表格 在tr标签中加入  is 绑定row组件，在表格时使用-->
					<tr is="row"></tr>
					<tr is="row"></tr>
					<tr is="row"></tr>
				</tbody>

				<ul>
					<li is="row"></li>
					<li is="row"></li>
					<li is="row"></li>
				</ul>

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

				<select name="" id="">
					<option is="row" value=""></option>
					<option is="row" value=""></option>
					<option is="row" value=""></option>
				</select>

二、在子组件中定义数据时，要使用函数返回数据，不然会报错

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>组件使用中的细节点</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<table>
				<tbody>
					<!--使用模板template制作表格 在tr标签中加入  is 绑定row组件，在表格时使用-->
					<tr is="row"></tr>
					<tr is="row"></tr>
					<tr is="row"></tr>
				</tbody>

				
			</table>

		</div>

		<script type="text/javascript">
			Vue.component('row',{
					//在子组件中定义数据时，data必须是个函数，不然就会报错了。
					data:function() {
					return {
						content:"this is Content"
					}
				},
				template:"<tr><td>{{content}}</td></tr>"
			})
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

三、子组件中使用数据模板和函数的用法

子组件实现，计数器的功能点击数据自动增加数字

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<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:"#app"
				
			})
		</script>

	</body>
</html>

使用发布订阅功能，实现和的计数：涉及到子组件向父组件传值 this.$emit("change")

父组件<counter @change="handleChange"></counter> 监听changes事件的发生。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 增加引用 ref ="one" 和change事件监听 -->
			<counter ref = "one" @change="handleChange"></counter>
			<counter ref = "two" @change="handleChange"></counter>
			<div>{{total}}</div>

		</div>

		<script >
			Vue.component("counter",{
				//绑定handleClick事件
				template:'<div @click="handleClick">{{number}}</div>',
				data:function() {
					return {
						number:0
					}
				},
				methods:{
					handleClick:function() {
						this.number ++;
						this.$emit("change")
					}
				}

			})
			var vm = new Vue({
				el:"#app",
				data:{
					total: 0
				},
				methods:{
					handleChange:function() {
						// alert("change")
						// console.log(this.$refs.one.number);
						// console.log(this.$refs.two.number);
						this.total=this.$refs.one.number + this.$refs.two.number;
					}
				}
				
			})
		</script>

	</body>
</html>

子组件使用引用的方法在父组件中更新total总计数器。