一. 传值方法

1. 子组件绑定 ref 属性

   <child ref="child"></child>
   

2. methods方法中使用$refs传值

   this.$refs.child.cInfo = "c2";
   

二. 传值实例

父组件

<template>
  <div>
    <h3>父组件</h3>
    <button @click="setChildInfo">向子组件传值</button>
    <hr />
    <h3>子组件</h3>
    <child ref="child"></child>
  </div>
</template>

<script>
//子组件地址（仅供参考），具体以实际项目目录地址为准
import child from "./Child.vue";
export default {
  components: {
    child: child
  },
  data() {
    return {};
  },
  methods: {
    // 向子组件传值
    setChildInfo() {
      this.$refs.child.cInfo = "c2";
    }
  }
};
</script>

<style scoped>
</style>

子组件

<template>
  <div>
    <p>收到父组件数据：{{ cInfo }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cInfo: "c1"
    };
  }
};
</script>

<style scoped>
</style>