Vue组件通信（父传子，子传父）

最新推荐文章于 2024-05-17 08:00:00 发布

wendyNo

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量137

点赞数

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

本文链接：https://blog.csdn.net/wendyNo/article/details/114888250

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

父传子props

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<cpn  :cmessage="message" :c-movies="movies"></cpn>
	</div>
	<template id="cpn">
		<div>
			<div>{{cmessage}}</div>
			<div>{{cMovies}}</div>
		</div>
	</template>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	const cpn = {
		template:'#cpn',
		props:{
			cmessage:{
				type:Object,
				default(){
					return {};
				}
			},
			cMovies:{
				type:String,
				default:''
			}
		},
		data(){
			return {}
		},
		methods: {
			
		},

	};
	const app = new Vue({
		el: "#app",
		data: {
			message:{name:'海王',name2:'海贼王'},
			movies:'电影'
		},
		components:{
			cpn
		}
	});
	
</script>
</body>
</html>

子传父

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<cpn @itemclick="itemclicks"></cpn>
	</div>
	<template id="cpn">
		<div>
			<button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
		</div>
	</template>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	const cpn = {
		template:"#cpn",
		data(){
			return {
				categories:[
					{ id: 1, name: '全部'},
					{ id: 2, name: '鞋子'},
					{ id: 3, name:'服装'}
				]
			}
		},
		methods: {
			btnclick(item){
				this.$emit('itemclick',item);
			}
		},
	}
	const vue = new Vue({
		el: '#app',
		data:{

		},
		components:{
			cpn
		},
		methods: {
			itemclicks(item){
				console.log(item)
			}
		},

	});
</script>
</body>
</html>

wendyNo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件通信（父传子，子传父）

父传子props<!DOCTYPE html><html><head> <title></title></head><body> <div id="app"> <cpn :cmessage="message" :c-movies="movies"></cpn> </div> <template id="cpn"> <div>
复制链接

扫一扫

专栏目录