父子间组件通信

  • 父子间组件通信已关闭评论
  • 112 次浏览
  • 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>