vue父组件和子组件数据传递
1. 父组件向子组件传递数据
- 父组件
<!-- 父组件 -->
<template>
<div class="home">
<!-- 父组件向子组件传递数据 将"msg"通过"msgFn"传给子组件-->
<HelloWorld :msgFn="msg" />
</div>
</template>
<script>
// 引入子组件
import HelloWorld from "@/components/HelloWorld.vue";
export default {
// import引入的组件需要注入到对象中才能使用
components: {
HelloWorld
},
data() {
// 这里存放数据
return {
msg: "hello world!"
};
},
};
</script>
- 子组件
<!-- 子组件 -->
<template>
<div class="son">{{msgFn}}</div>
</template>
<script>
export default {
// props 可以是数组或对象,用于接收来自父组件的数据
// 接收父级传过来的数据msgFn
props: ["msgFn"],
data() {
// 这里存放数据
return {};
}
};
</script>
2. 子组件向父组件传递数据
- 父组件
<!-- 父组件 -->
<template>
<div class="home">
<!-- sonMsg是子组件传过来的事件 fatherMsg是父组件要接收的方法 -->
<HelloWorld @sonMsg="fatherMsg" />
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
// import引入的组件需要注入到对象中才能使用
components: {
HelloWorld
},
data() {
// 这里存放数据
return {};
},
// 方法集合
methods: {
// 参数 val 就是子组件传过来的数据
fatherMsg(val) {
console.log(val); // 来自子组件的信息!
}
}
};
</script>
- 子组件
<!-- 子组件 -->
<template>
<div class="son">
<button @click="btnClick">按钮</button>
</div>
</template>
<script>
export default {
data() {
// 这里存放数据
return {
sonMsg: "来自子组件的信息!"
};
},
methods: {
btnClick() {
// 用$emit()触发当前实例上的事件
// 把this.sonMsg传递给sonMsg事件
this.$emit("sonMsg", this.sonMsg);
}
}
};
</script>
注意:简而言之就是子组件定义一个事件,然后通过$emit方式
传递过去一个事件名称,,父组件首先在元素上用@子组件自定义事件名=”父组件自定义方法”来接受,最后就是调用父组件刚刚定义的方法,传入一个参数,就可以接收来自子组件的事件触发及其参数传递。
刚来这里,慢慢探索中。