Vue之componet之$children(027)

最新推荐文章于 2024-02-11 19:31:18 发布

从小白小菜开始

最新推荐文章于 2024-02-11 19:31:18 发布

阅读量454

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_31707323/article/details/116262194

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

Vue之componet之$children

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<title>componet-children</title>
	</head>
	<body>
		<div id="app">
			<child></child>
			<child></child>
			<child></child>
			<button @click="showchild">click me</button>
		</div>

		<!--child template-->
		<template id="child">
			<div>
				<h1>I am child</h1>
				<h1>{{childmessge}}</h1>
			</div>
		</template>

		<script>
			//childe componet
			let child = Vue.component('child', {
				template: "#child",
				data() {
					return {
						childmessge: "I am from child",
						name: "xiao li"
					}
				},
				methods: {
					show() {
						alert("I come")
					}
				}
			})

			//root
			new Vue({
				el: "#app",
				methods: {
					showchild() {
						console.log(this.$children);//查看$children
						console.log(this.$children[1].name)//访问子组件数据项
						this.$children[0].show();//访问子组件方法
					}
				},
				components: {
					child
				}
			})
		</script>
	</body>
</html>

运行效果：
在这里插入图片描述
点击按钮后：
总结：
访问当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

从小白小菜开始

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之componet之$children(027)

Vue之componet之$children完整代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>componet-children</title> </head> <body> <div id="app"&g
复制链接

扫一扫