如何在原生JavaScript中获取Vue.js组件的data属性值

结论 #

该需求可以正常实现，你的写法错误原因如下：

• app.component()返回的btn是组件定义对象，而非页面中实际渲染的组件实例，它的data属性是你声明的函数，不是执行后生成的响应式数据对象，因此无法直接读取count。
• 组件实例需要在应用完成挂载、组件渲染后才会生成，你在app.mount()执行前就打印取值，此时实例还未创建。

正确实现方式 #

步骤1：给子组件绑定ref #

在模板中使用button-counter组件时添加ref属性，用于关联组件实例：

<button-counter ref="counter"></button-counter>

步骤2：挂载完成后读取实例数据 #

app.mount()执行后会返回根组件实例，通过根实例的$refs即可获取绑定的子组件实例，读取count属性：

// 挂载应用，获取根组件实例
const rootInstance = app.mount("#app")
// 等待DOM更新完成确保实例已生成，也可直接在mount后读取
Vue.nextTick(() => {
  console.log(rootInstance.$refs.counter.count) // 正确输出 0
})

注意事项 #

如果你直接执行btn.data()可以拿到{count: 0}，但这只是组件定义的初始数据模板，和页面中运行的组件实例数据相互独立，修改该值不会同步到页面，要获取运行时的实时数据必须读取组件实例的属性。

修正后完整代码 #

<div id="app" v-cloak>
  <h1>{{greeting}}</h1>
  <button-counter ref="counter"></button-counter>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  let app = Vue.createApp({
    data: function(){
      return {
        greeting: "hi"
      }
    }
  })

  app.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })
  // 挂载后取值
  const rootInstance = app.mount("#app")
  Vue.nextTick(() => {
    console.log(rootInstance.$refs.counter.count)
  })
</script>

内容的提问来源于stack exchange，提问作者noobyy