1、父传子（ 定义：父传子使用的是 props ）
① 首先确定父组件和子组件，然后在父组件中引入子组件，注册并使用；
父组件代码如下：
<template>
<div>
<h1>父组件</h1>
<!-- 使用子组件 -->
<ChildView></ChildView>
</div>
</template>
<script>
// 引入子组件
import ChildView from "../components/child/child1.vue";
export default {
name: "FatherView",
components: {
// 注册子组件
ChildView,
}
};
</script>
子组件代码如下：
<template>
<div>
<h1>子组件</h1>
</div>
</template>
<script>
export default {
name: "ChildView",
components: {},
};
</script>
② 然后在父组件的data里面定义需要传递给子组件的数据以及methods里面的自定义事件；
//传递的数据 data() { return { list: [1, 2, 3, 4, 5], title: "wanjie", age: 22, sex: 1, }; }, methods: { // 自定义事件 myHander(v) { console.log("myHander", v); }, },
③ 通过给子组件标签上自定义数据和事件进行输送；
<!-- props绑定的属性和事件 -->
<ChildView
:title="title"
:list="list"
:age="age"
:sex="sex"
@myHander="myHander"
></ChildView>
④ 子组件接受数据需要在script中定义一个与data平级的props，在props数组的内部来进行接收；
//声明props //这里的两个值需要和父组件传过来的值相同，否则就会报错 props: ["title", "list"], data() { return {}; },
⑤ 子组件在页面上显示，直接this.属性名就可以获取到；
<p>{{ this.title }}</p>
⑥ 如果没有在子组件的props里面声明接收，可以使用 $attrs 获取到传递的数据、$listeners 获取自定义事件；
console.log("child", this.list); //输出结果为：child [1, 2, 3, 4, 5]
console.log("其他没有声明的props在:", this.$attrs); //输出结果为：其他没有声明的props在: {age: 22, sex: 1}
console.log("没有使用的事件：event", this.$listeners); //输出结果为：没有使用的事件：event {myHander: ƒ}
完整父组件代码如下：
<template>
<div>
<h1>父组件</h1>
<!-- 使用子组件 -->
<!-- props绑定的属性和事件 -->
<ChildView
:title="title"
:list="list"
:age="age"
:sex="sex"
@myHander="myHander"
></ChildView>
</div>
</template>
<script>
// 引入子组件
import ChildView from "../components/child/child1.vue";
export default {
name: "FatherView",
components: {
// 注册子组件
ChildView,
},
mixins: [],
props: {},
data() {
return {
list: [1, 2, 3, 4, 5],
title: "wanjie",
age: 22,
sex: 1,
};
},
methods: {
// 自定义事件
myHander(v) {
console.log("myHander", v);
},
},
};
</script>
完整子组件代码如下：
<template>
<div>
<h1>子组件</h1>
<p>{{ this.title }}</p>
<button type="button" @click="fn">父传子</button>
</div>
</template>
<script>
export default {
name: "ChildView",
components: {
},
mixins: [],
//声明props
//这里的两个值需要和父组件传过来的值相同，否则就会报错
props: ["title", "list"],
data() {
return {};
},
mounted() {
// 打印测试
console.log("child", this.title); //child wanjie
console.log("child", this.list); //child [1, 2, 3, 4, 5]
console.log("其他没有声明的props在:", this.$attrs); //其他没有声明的props在: {age: 22, sex: 1}
console.log("没有使用的事件：event", this.$listeners); //没有使用的事件：event {myHander: ƒ}
},
methods: {
fn() {
this.$emit("myHander", 123);
},
},
};
</script>
2、子传父（ 定义：父传子使用的是 emit ）
① 首先确定父组件和子组件，然后在父组件中引入子组件，注册并使用；
② 然后在子组件的data里面定义需要传递给父组件的数据以及methods里面的自定义事件；
③ 在子组件里面定义一个方法传值 $emit ("第一个参数为自定义方法名"，第二个参数为需要传递的值)；
methods: { fn() { this.$emit("pass", this.name); }, },
父组件代码如下：
<template>
<div>
<h1>父组件</h1>
<!-- 使用子组件 -->
<AboutList></AboutList>
</div>
</template>
<script>
// 引入子组件
import AboutList from "../components/children/AboutList";
export default {
name: "AboutView",
// 注册引入的子组件
components: {
AboutList,
},
data() {
return {};
},
methods: {},
};
</script>
子组件代码如下：
<template>
<div>
<h2>子组件</h2>
<button type="button" @click="fn">子传父</button>
</div>
</template>
<script>
export default {
name: "AboutList",
components: {},
data() {
return {
// 传递给父组件的值
list: [1, 2, 3, 4, 5],
name: "wj",
sex: 12,
};
},
methods: {
// 自定义事件
fn() {
this.$emit("pass", this.name);
},
},
};
</script>
④ 在父组件定义一个自定义事件接收子组件传递过来的事件、data里面定义一个来接收数据；
data() { return { dataList: [], }; }, methods: { getList(val) { this.dataList = val; console.log("子组件传递回来的数据", this.dataList); }, },
注意：自定义事件的等于号前面@pass需和子组件自定义方法名一样；等于号后面为父组件自定义方法名，需和下方的方法名对应。
子组件代码：
methods: { fn() { this.$emit("pass", this.name); }, },
父组件代码：
<AboutList @pass="getList"></AboutList> // 接收自定义事件 methods: { getList(val) { this.dataList = val; console.log("子组件传递回来的数据", this.dataList); }, },
完整的父组件代码如下：
<template>
<div>
<h1>父组件</h1>
<!-- 使用子组件 -->
<AboutList @pass="getList"></AboutList>
<p>name:{{ dataList }}</p>
</div>
</template>
<script>
// 引入子组件
import AboutList from "../components/children/AboutList";
export default {
name: "AboutView",
// 注册引入的子组件
components: {
AboutList,
},
data() {
return {
dataList: [],
};
},
methods: {
getList(val) {
this.dataList = val;
console.log("子组件传递回来的数据", this.dataList); //输出结果为：子组件传递回来的数据 wj
},
},
};
</script>
完整的子组件代码如下：
<template>
<div>
<h2>子组件</h2>
<button type="button" @click="fn">子传父</button>
</div>
</template>
<script>
export default {
name: "AboutList",
components: {},
data() {
return {
list: [1, 2, 3, 4, 5],
name: "wj",
sex: 12,
};
},
methods: {
fn() {
this.$emit("pass", this.name);
},
},
};
</script>
