Vue中传值问题，子传父或者父传子（适合初学者）,对于兄弟传值与隔代传值可用bus或者vuex管理工具进行

最新推荐文章于 2024-08-21 19:37:13 发布

飘走的落不离

最新推荐文章于 2024-08-21 19:37:13 发布

阅读量179

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/gebieren/article/details/106536054

版权

在开发Vue项目中，使用了组件化开发的方式，有点有三：①便于后期维护。②可阅读性强。③组件复用。

那么问题来了，如何解决组件之间的传值问题，这个对于初学者特别容易踩坑，搞不懂里面到底如何实现的，下面就用一个demo之间来把Vue中常用的两种方式（子传父、父传子）传值方式进行阐述：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style></style>
	</head>
	<body>
		<div id="app">
			<div>父亲组件 --{{money}}</div>
			<children :car="car" @get="getson"></children>
		</div>
		<script src="vue.js"></script>
		<script>
			Vue.component("children", {
				data() {
					return {
						money: 1000,
					};
				},
				template: `
				<div>
					孩子组件--{{car}}
					<br/>
					<button @click='get'>给父组件传值</button>
				</div>
				`,
				methods: {
					get() {
						this.$emit("get", this.money);
					},
				},
				props: ["car"],
			});

			const vm = new Vue({
				el: "#app",
				data: {
					car: "马萨拉蒂",
					money: 0,
				},
				methods: {
					getson(money) {
						console.log("触发了");
						this.money = money;
					},
				},
			});
		</script>
	</body>
</html>