子组件定义data

最新推荐文章于 2022-11-01 17:31:41 发布

albert48

最新推荐文章于 2022-11-01 17:31:41 发布

阅读量484

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/albert48/article/details/103401279

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

子组件定义data，并不能像根组件那样定义成对象，而是应该定义成函数，并把值进行返回

因为子组件会被调用很多次，并不希望子组件的数据和其他组件的数据产生冲突，所以通过函数返回对象让每个子组件都有独立的数据

<!DOCTYPE html>
<html>
<head>
	<title>change color</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id='app'>
		<table>
			<tbody>
				<tr is="row"></tr>
				<tr is="row"></tr>
				<tr is="row"></tr>
			</tbody>
		</table>
	</div>


	<script>
		Vue.component('row',{
			data(){
				return {
					content:'row',
					index:'1'
				}
			},
			template:'<tr><td>this is a {{content}},{{index}}</td></tr>'
		})
		var vm=new Vue({
			el:'#app',

		})
	</script>


</body>
</html>

优惠劵

albert48

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子组件定义data

子组件定义data，并不能像根组件那样定义成对象，而是应该定义成函数，并把值进行返回因为子组件会被调用很多次，并不希望子组件的数据和其他组件的数据产生冲突，所以通过函数返回对象让每个子组件都有独立的数据<!DOCTYPE html><html><head> <title>change color</title> <...
复制链接

扫一扫