【VUE】父传子、子传父

皮皮皮皮克斯

于 2020-11-03 17:12:55 发布

阅读量1.3k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43996362/article/details/109473241

版权

【父传子】

父组件：

parent.vue


<template>
	<button @click="doClick">点击传值给子组件</button>
	<child ref="childRef" city="city"></child>
</template>
<script>
doClick() {
	this.$refs.childRef.search('搜索些什么')
}
</script>

子组件：

child.vue

<template>
	子组件模块
</template>
<script>
export default {
	props: ["city"],
	data() {
		return {}
	},
	methods: {
		search(text) {
			console.log(text, "texttttttttttttttttt")  // 此处打印的是 搜索些什么
		}
	}
}

</script>

【子传父】

子组件：

<template>
	<button @click="doClick">点击触发父级事件</button>
</template>
<script>
	doClick() {
		this.$emit("search", "这个是传过来的值")
	}
</script>

父组件：

<template>
	父组件
</template>
<script>
	search(text) {
		console.log(text, "texttttttttttt")  // 此处打印 这个是传过来的值
	}
</script>

总结：
父传子： this.$refs.ref名称.事件名称（传的值）
子传父： $emit(“事件名”, “传的值”)