vue父子组件通讯

最新推荐文章于 2024-11-01 14:29:13 发布

给我一瓶冰阔洛

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量146

点赞数

分类专栏： vue 文章标签： vue.js javascript 父子组件通讯

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

版权

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">
		<v :msgg="msg" :content="content" @itemclick="active"></v>
	</div> 
		
<template id="demo">
	<div>
		<button @click="btnClick(item)" v-for="item in group">{{item.title}}</button>
		<p>{{msgg}}</p>
		<vv :content="content"></vv>
	</div>
</template>

<template id="acticle">
	<div>
	
		<p>{{content}}</p>
	</div>
</template>


</body>

<script>
	const vv = {
	  template: '#acticle',
	  props: ['content'],
	}
	
	const v = {
	  template: '#demo',
	   props: ['msgg',"content"],
	  data(){
		  return {
			  group:[
				  {id:1,author:"刘禹锡",title:"秋词",text:"自古逢秋悲寂寥,我言秋日胜春朝"},
				  {id:2,author:"纳兰容若",title:"木兰花令拟古决绝词",text:"人生若只如初见,何事秋风悲画扇"}, 
				  {id:3,author:"辛弃疾",title:"鹧鸪天",text:"若教眼底无离恨,不信人间有白头"}, 
			  ],
			
		  }
	  },
	  methods:{
		  btnClick(item) {
			  this.$emit('itemclick',item)//事件发射    v-on 来监听 
		  }
	  },
	  components : {
	   	vv:vv,
	  }
	}
	
	 var vm = new Vue({
	  el: '#app',
	  data:{
		 bookTables:[
			{name:"php",price:30.00,count:0},	
			{name:"mysql",price:40.00,count:0},
			{name:"java",price:50.00,count:0},
			{name:"c++",price:60.00,count:0},
		 ],
		 content:'',
		 msg:"诗词"
	  },
	  methods:{
		  active(item){
			this.content = item.text
			console.log(this.content,"active")
		  }
		
	  },
	 components:{
	 	v:v
	 }
	})
	
	
</script>
</html>