Vue 父子组件相互访问

给我一瓶冰阔洛

于 2022-09-01 15:26:38 发布

阅读量165

点赞数

分类专栏： vue 文章标签： Vue 父子组件相互访问

本文链接：https://blog.csdn.net/qq_43035350/article/details/126644348

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
</head>
<body>
	
		<div id="app">
			<button @click="showindex">下标访问子组件</button>
			<button @click="showbtn">ref访问子组件</button>
		
			<cpn></cpn>
			<qw ref="aa"></qw>
		</div> 
		
</body>


<template id="demo">
	<div>
		<h1>子组件</h1>
	</div>
</template>

<template id="demo2">
	<div>
		<h1>子组件demo2</h1>
		<button @click="btnclick">访问父方法</button>
		
		<abc></abc>
	</div>
</template>

<template id="demo3">
	<div>
		<h1>子组件demo3</h1>
		<button @click="fwParent">访问父方法</button>
		<button @click="rootbtn">访问根组件root</button>
	</div>
</template>

<script>
	
	Vue.component('cpn',{
		data () {
		  return {
		    wold: 'sddddf'
		  }
		},
		template:'#demo',
		methods:{
			showmsg(){
				console.log(123456);
			}
		}
	})
	

	const abc = Vue.extend({
		data () {
		  return {
		    wold: 'cdcdcd'
		  }
		},
		template:'#demo3',
		methods:{
			showmsg(){
				console.log(6666666);
			},
			fwParent(){
				this.$parent.btnclick()//访问父方法btnclick
				console.log(this.$parent.wold)
			},
			rootbtn(){
				console.log(this.$root.name); // this.$root == vm
				this.$root.test()
			}
			
		}
		
		
	})
	
	
	Vue.component('qw',{
	
		data () {
		  return {
		    wold: 'sdasadasadf'
		  }
		},
		template:'#demo2',
		methods:{
			showmsg(){
				console.log(9999999);
			},
			btnclick(){
				console.log("qw组件")
			}
		},
		components : {
		 	abc:abc
		}
		
	})
	
	 var vm = new Vue({
	  el: '#app',
	  data:{
		  isshow:true,
		  world:"qwer",
		  name:"abcdefg"
	  },
	  methods:{
		  showindex:function(){
			 console.log(this.$children)
			 //通过$children访问子组件的方法
			 this.$children[1].showmsg();
			 console.log(this.$children[0].wold)  //通过下标访问组件data数据
		  },
		  test(){
			console.log(123)  
		  },
		  
		  showbtn(){
			  // <qw ref="aa"></qw>   ref 指定组件名称
			  //$refs.aa 通过ref名称访问子组件
			  console.log(this.$refs.aa.wold)
			
		  }
	  }, 
	})
	
	
</script>
</html>