父传子
利用props传值，子组件中规定props数据类型，然后父组件使用子组件时需要绑定数据在子组件上：
父组件
<template>
<div class="parents-div">
<!--绑定msg传入子组件-->
<Children :msg='msg'/>
</div>
</template>
<script>
import Children from './Children.vue'//引入子组件
export default {
components:{Children},//注册子组件
data(){
return{
msg:"test",//父组件需要传递的数据
}
},
}
</script>
<style scoped>
.parents-div{}
</style>
子组件
<template>
<div class="children-div">
<!--页面中使用数据-->
{{msg}}
</div>
</template>
<script>
export default {
props:{
msg:String,//子组件需要接受的数据
},
components:{},
}
</script>
<style scoped>
.children-div{}
</style>
子传父
利用$emit传值，父组件监听自定义事件，在子组件中通过触发该事件来传值：
子组件
<template>
<div class="children-div"></div>
</template>
<script>
export default {
components: {},
data() {
return {
msg: "test", //子组件需要传递给父组件的数据
};
},
mounted() {
this.getMsg();
},
methods: {
getMsg() {
this.$emit("get-msg", this.msg);
},
},
};
</script>
<style scoped>
.children-div {
}
</style>
父组件
<template>
<div class="parents-div">
<!--触发自定义事件get-msg接收子组件数据-->
<Children @get-msg="getMsg" />
</div>
</template>
<script>
import Children from "./Children.vue"; //引入子组件
export default {
components: { Children }, //注册子组件
methods: {
//获取到子组件传递过来的数据
getMsg(msg) {
console.log(msg);
},
},
};
</script>
<style scoped>
.parents-div {
}
</style>
vuex传值
vuex相当于一个公共仓库，保存着所有组件都能共用的数据，需要时可以直接使用，不需要考虑组件间是否有引用与被引用的父子关系，具体使用点击这里。