父子间组件通信

2023-08-04 14:37 由 Wanker 发表于 #前端开发

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>

热门相关：倾心之恋：总裁的妻子大妆大妆未来兽世：买来的媳妇，不生崽异世修真邪君

1、父传子（ 定义：父传子使用的是 props ）