vue父子组件传输

本文介绍了Vue中父子组件的通信方式,包括使用props从父组件向子组件传递数据,以及通过$emit让子组件向父组件发送消息。同时,还详细讲解了依赖注入(provide/inject)机制,它允许在任意层级的组件间传递数据,但要注意这种方式是非响应式的。文中通过实践示例展示了provide/inject的使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

VUE父子组件传输—— props/$emit和project / inject

props/$emit

props:父组件向子组件传输,$emit:子组件向父组件传输

  • props只能是父组件向子组件进行传值,props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。
  • props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以传递一个函数。

父组件:practice.vue

<template>
   <div>
    <ul>
      <li v-for="framework in sortedFrameworks" :class="framework.language">
        <!-- 动态渲染li列表,通过v-for="  in  "结构 获取 各个列表 -->
        <!-- 动态获取class名,:class="framework.language" -->
        {{ framework.name }}
      </li>
    </ul>
    <practice-add
      :frameworks="frameworks"
      :languages="languages"
      @framework-added="addFramework"
    ></practice-add>
    <!-- 父组件在调用子组件时,定义:frameworks="frameworks" :languages="languages" 这样的代码,通过这个的代码可以将属性数据传递子组件;
    而子组件通过 props 声明:props: ['frameworks', 'languages'], 用来接收父组件传递过来的属性数据 -->
   </div>
</template>

<script>
import practiceAdd from "./components/practiceAdd";
export default {
  name: "practice",
  components: { practiceAdd },
  data() {
    return {
      frameworks: [
        { name: "Mate30Pro", language: "huawei" },
        { name: "xiaomi11", language: "xiaomi" },
        { name: "oppo reno5", language: "oppo" },
        { name: "X60", language: "vivo" },
      ],
      languages: ["huawei", "xiaomi", "oppo", "vivo"],
    };
  },
  computed: {
    sortedFrameworks() {//这个方法是用来排序列表的
      return this.frameworks.sort((a, b) => {
        if (a.language < b.language) {
          return -1;
        } else if (a.language > b.language) {
          return 1;
        } else {
          return 0;
        }
      });
    },
  },
  methods: {
    addFramework(framework, language) {
      this.frameworks.push({ name: framework, language: language });
    },
  },
};
</script>
<style scope>
.huawei { color: cornflowerblue;}
.xiaomi { color: gold;}
.oppo {  color: aqua;}
.vivo {  color: darkgreen;}
</style>

子组件 practiceAdd.vue

<template>
  <div>
    框架:<input v-model="newFramework" name="framework" /> 语言:
    <select v-model="newLanguage">
      <option v-for="language in languages" v-text="language"></option>
    </select>
    <button @click="addNewFramework">新增框架</button>
     <!-- 当点击按钮时,会触发点击事件addNewFramework,这样能通过this.$emit('framework-added', this.newFramework, this.newLanguage);这行代码传递给父组件
      父组件那边作用域定义的@framework-added="addFramework" 来监听事件处理 -->
  </div>
</template>

<script>
export default {
  name: "practiceAdd",
  props: ["frameworks", "languages"],
  data: function () {
    return {
      newFramework: "",
      newLanguage: "",
    };
  },
  methods: {
    addNewFramework() {
      let exists = this.frameworks.find(
        (framework) => framework.name == this.newFramework
      );
      if (exists) {
        alert("该框架已存在!");
        return;
      }
      this.$emit("framework-added", this.newFramework, this.newLanguage);
    },
  },
};
</script>

依赖注入(project / inject)

provide-inject组件依赖注入,可以用在父子组件传输,但不局限于父子,也可以是祖孙之间或是更嵌套的组件之中, 但需要注意的是:这种传输是非响应式的

project / inject是Vue提供的两个钩子,和data、methods是同级的,且project的书写形式和data一样。

project 钩子用来发送数据或方法。inject钩子用来接收数据或方法

在上层组件中,通过provide传递参数,底层组件通过inject接收,格式为:inject: [“app”, “num”],

父组件 otherIndex.vue

<template>
    <div class="provide">
      <div>{{ msg }}</div>
      <p>{{ phone }}</p>
      <p>{{ num }}</p>
      <other class="inject"></other>
    </div></template>

<script>
import other from "./components/other";
export default {
  name: "otherIndex",
  components: { other},
  provide() {
    return {
      app: this,
      num: this.num,
    };
  },
  data() {
    return {
      msg: "hello",
      phone: "eazin",
      num: "19940420",
    };
  },
};
</script>

<style scope>
.provide,
.inject {
  background-color: cadetblue;
  color: crimson;
  font-size: 18px;
}
</style>

子组件other.vue

<template>
  <div>
      <div>{{ msg }}--{{ phone }}</div>
      <p>{{ numaa }}</p>
  </div>
</template>

<script>
export default {
  name: "other",
  inject: ["app", "num"],
  data() {
    return {
      msg: " ",
      phone: " ",
      numaa: "11",
    };
  },
  created: function () {
    this.getData();
  },
  methods: {
    getData() {
      this.msg = this.app.msg;
      this.phone = this.app.phone;
      this.numaa = this.num;
    },
  },
};
</script>

以 app: this, 这种形式传递到底层组件中,那底层组件可以访问父组件的所有的数据,格式为 this.app.
若上层组件是普通单数据传输 num: this.num, 底层组件也是用 this.num 来访问

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值