父传子:
父组件
<template>
<div id="app">
<Student :name="a" :sex="b" :age="c"></Student>
</div>
</template>
<script>
import Student from "./components/Student.vue";
export default {
name: "App",
data() {
return {
a: "张三",
b: "男",
c: 18,
};
},
components: {
Student,
},
};
</script>
<style>
</style>
子组件
<template>
<div class="student">
<div>姓名:{{ name }}</div>
<div>性别:{{ sex }}</div>
<div>年龄:{{ age }}</div>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {};
},
props: ["name", "sex", "age"],
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
传递过程:
子传父:
方法一:回调函数(props)
父组件
<template>
<div id="app">
<A :jieshou="jieshou"></A>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
import A from "./components/A.vue";
export default {
name: "App",
data() {
return {
msg: "",
};
},
components: {
A,
},
methods: {
jieshou(a) {
this.msg = a;
},
},
};
</script>
<style>
</style>
子组件
<template>
<div class="A">
<h1>{{ msg }}</h1>
<button @click="dian">点击</button>
</div>
</template>
<script>
export default {
name: "A",
data() {
return {
msg: "子组件信息",
};
},
props: ["jieshou"],
methods: {
dian() {
this.jieshou(this.msg);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
传递过程
方法二:回调函数(自定义事件)
父组件
<template>
<div id="app">
<A @jie="jieshou"></A>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
import A from "./components/A.vue";
export default {
name: "App",
data() {
return {
msg: "",
};
},
components: {
A,
},
methods: {
jieshou(a) {
this.msg=a
},
},
};
</script>
<style>
</style>
子组件
<template>
<div class="A">
<h1>{{ msg }}</h1>
<button @click="dian">点击</button>
</div>
</template>
<script>
export default {
name: "A",
data() {
return {
msg: "子组件信息",
};
},
methods: {
dian() {
this.$emit("jie",this.msg)
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
传递过程