vue组件之间的传值

首先我们调用组件父子组件不一定是父子路由，我们在一个组件里调用另一个组件即可形成父子组件。

一.父组件向子组件传值

创建好两个组件，父组件为Compont.vue，子组件为DataComponT.vue，父组件Compont里我们引入子组件：

<template>
  <div>
    <DataComponT v-bind:secondlist="secondlist"></DataComponT>
  </div>
</template>
import DataComponT from "./DataComponT.vue";
data() {
    return {
      secondlist: "千股跌停",
    };
  },
components: {
    DataComponT,
  },

子组件内容为：其主要内容为props模块的添加为了接收父组件传来的参数。

<!--  -->
<template>
  <div>
    <h6>DataComponT</h6>
    <h6>{{secondlist}}</h6>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    secondlist: {
      type: String,
      required: true,
    },
  },
};

核心：父组件调用子组件，子组件通过prop接收参数。
但是有要注意的点：
子组件接受的父组件的值分为——引用类型和普通类型两种，
普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
引用类型：数组（Array）、对象（Object）
其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，
但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做，否则最好不要这么做。
原文链接：https://blog.csdn.net/qq_34928693/article/details/80539350

二.子组件向父组件传值

父组件为：Compont.vue，子组件为：DataComponS.vue
我们通过子组件发送消息或者触发事件方式传递子组件的参数给父组件。
子组件这样写：

<!--  -->
<template>
  <div>
      <h6>DataComponS</h6>
      <span>用户名：</span>
      <input type="text" v-model="username" @change="setUser">
  </div>
</template>

<script>
export default {
  data () {
    return {
        username:''
    };
  },

  methods: {
      setUser(){
          this.$emit('transferUser',this.username)
      }
  }
}
</script>

核心：子组件的 this.$emit(‘transferUser’,this.username)
父组件这样写：

<template>
  <div>
    <DataComponS @transferUser="getUser"></DataComponS>
    <p>用户名为：{{user}}</p>
  </div>
</template>

export default {
 data() {
    return {
      user: "",
    };
  },
  components: {
    DataComponS,
  },
   methods: {
    getUser(msg) {
      this.user = msg;
    },
  },
}

核心：在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username

其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username 将通过这个事件传递给父组件