vue $children和 $refs

vue 父组件访问子组件

vue $children和 $refs

		<cpn ref="aaa"></cpn>
		<button @click="showchildren">按钮</button>
	</div>
	<template id="cpn">
		<div>
			<h2>子组件</h2>
		</div>
	</template>
	<script>
		const app =new Vue({
			el:"#app",
			methods:{
				showchildren(){
					this.$children[0].showMessage()
					/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
					/* 99%都用它来访问子组件的数据... */
					console.log(this.$refs.aaa.name)
					/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
					console.log(this.$children[0].name)
				}
			},
			data:{
				message:"你好啊"
			},
			components:{
				cpn:{
					template:`#cpn`,
					methods:{
						showMessage(){
							console.log("子组件的方法")
						}
					},
					data(){
						return{
							name:"子组件的name111"
						}
					}
				}
			}
		})
	</script>
</body>

也没什么说的，refs更常用，ref可在组件中设置id，在使用时，直接$.refs.***(你设置的id)