- A+
所属分类：Web前端
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>
