Vue2使用$ref从子组件加载数据并放入父组件的数据

Question

在 Vue2 中，我试图访问子组件的数据，然后在不触发事件的情况下放入父组件的数据。下面的例子我想把count:20保存到父组件中，如果有错误请指出，谢谢！

子组件

<template>
  <div></div>
</template> 
<script>
export default {
  data() {
    return {
      count: 20,
    };
  },
};
</script>

父组件

<template>
  <div>
    <child ref="child1"></child>
    {{count}}
</div>
</template> 

<script> import child from './child.vue' 
export default { 
  components: {
    child
  }, 
  data() {
    return{
      count:this.$refs.child1.count
    }
  },
} 
</script>

VScode

中的警告消息

Property 'count' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'count' does not exist on type 'Vue'.

浏览器中的警告消息

[Vue warn]: Error in data(): "TypeError: undefined is not an object (evaluating 'this.$refs.child1')"

Answer 1

让我作为序言，我建议按预期使用 Vue 框架。因此，将数据从 child 传递到 parent 应该使用 $emit 或使用 vuex 存储进行集中状态管理。

除此之外，您需要等到安装 parent 组件才能设置 count 数据属性。

Child

<template>
  <div></div>
</template> 
<script>
export default {
  data() {
    return {
      count: 20,
    };
  },
};
</script>

Parent

<template>
  <div>
    <child ref="child1"></child>
    {{ count }}
  </div>
</template>

<script>
import Child from "./components/Child";

export default {
  components: {
    Child
  },
  data() {
    return{
      count: 0
    }
  },
  mounted () {
    this.count = this.$refs.child1.count
  }
};
</script>

这会起作用，但不会反应。这一切都可以大大简化并通过以下更改做出反应：

Child

<template>
  <div></div>
</template> 
<script>
export default {
  data() {
    return {
      count: 20,
    };
  },
  watch: {
    count (currentValue) {
      this.$emit('update', currentValue);
    }
  },
  beforeMount () {
    this.$emit('update', this.count)
  }
};
</script>

Parent

<template>
  <div>
    <child @update="count = $event"></child>
    {{ count }}
  </div>
</template>

<script>
import Child from "./components/Child";

export default {
  components: {
    Child
  },
  data() {
    return{
      count: 0
    }
  }
};
</script>

快速link展示一个工作示例：https://codesandbox.io/s/interesting-kalam-et0b3?file=/src/App.vue

Vue2使用$ref从子组件加载数据并放入父组件的数据

Vue2 use $ref to load data from child component and put into parent component's data

components

ref

vue.js

vue-component