vue父子组件传输

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 来访问