0
点赞
收藏
分享

微信扫一扫

vue组件之间的通信2

拾光的Shelly 2022-02-08 阅读 58

父组件传递参数给子组件,也就是子组件的数据来源于父组件,父data,子props,通过:props=data

子组件传递参数给父组件,就是是父组件的数据来源于子组件,子data,$emit(‘ccc’,item),item为传递给父组件的数据,父:引用子组件,@ccc=methods

示例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<template id="child">
			<div>
				我是子组件,我要给父组件传递一个参数
				<button v-for="item in stuList" @click="tran()">{{item}}</button>
			</div>
		</template>
		<div id="app">
			{{message}}
			<child @paclick='paclick'></child>
		</div>
			<script src="../js/vue.js"></script>
			<script>
			const child = {
				template: '#child',
				data() {
					return {
						stuList: ['s1','s2','s3','s4']
					}
				},
				methods: {
					tran(){
						console.log(456)
						this.$emit('paclick',this.stuList)
					}
				}
			}
			new Vue({
				el: '#app',
				data: {
					message: '大家好,我是父组件'
				},
				components: {
					child
				},
				methods: {
					paclick(item){
						console.log(item)
					}
				}
			})
			</script>
	</body>
</html>

示例2

-------------------------子--------------------------
<template>
	<div>
		<h1>BOOK的天下</h1>
		<h2>{{messageprops}}</h2>
		<button @click="goto()">传递给父</button>
	
	</div>
</template>

<script>
	export default {
		name: 'book',
		props:{
			messageprops: {
				type:String,
				
			}
		},	
		data() {
			return {
				stuList: ['s1','s2','s3','s4','s5']
			}
		},
		methods:{
			goto(){
				this.$emit('clickck',this.stuList)
			}
		}
	}
</script>

<style>
</style>

--------------------------父----------------------
<template>
	<div>
	<Book :messageprops='haha' @clickck='clickckll'></Book>
	
	</div>
</template>

<script>
	import Book from './book'
	export default {
		name: 'bookFather',

		data() {
			return {
				haha: '你好啊'
			}
		},
		methods:{
			clickckll(item){
				console.log(item)
			}
		},
	components:{
		Book
	}
	}
</script>

<style>
</style>

举报

相关推荐

0 条评论