一、父传子

在父组件中，用 v-bind 动态绑定一个自定义属性，用于给子组件传递数据

父组件：

<template>
  <div>
    <child :users="user"></child>
  </div>
</template>
 
<script>
import { child } from "./child";
export default {
  components: { child },
  data() {
    return {
      user: '张三'
    };
  }
};
</script>

在子组件中，使用 props 接收父组件传过来的数据。

<template>
  <div>{{ users }}</div>
</template>
 
<script>
export default {
  props: ["users"]
};
</script>

 二、子传父

子组件通过事件的方式，利用 $emit 给父组件传值。

注意：$emit 的第一个参数是父组件自定义事件的方法名，后边的 “value” 是子组件要给父组件传递的数据 

<template>
  <div>
    <button @click="datas"></button>
  </div>
</template>
 
<script>
export default {
  methods: {
    datas() {
      this.$emit("info", value);
    }
  }
};
</script>

 在父组件中，绑定一个自定义事件，用来接收子组件传来的值；

<template>
  <div>
    <child @info="getInfo"></child>
  </div>
</template>
 
<script>
import { child } from "./child";
export default {
  components: { child },
  methods: {
    getInfo(value) {
      // value 就是子组件传递过来的数据
    }
  }
};
</script>