《vue3怎么挂载数据》

在Vue3中挂载数据，主要通过setup函数或者组合式API中的ref和reactive来实现。接下来几种挂载数据的方法。

一、使用ref定义并挂载简单数据

这是最基础的方式之一。ref用于定义一个响应式的引用类型数据。

javascript

  <div>
    <!-- 绑定数据 -->
    <p>{{ count }}</p>
    <button>增加</button>
  </div>
</p>


import { ref } from 'vue'

export default {
  setup() {
    // 定义数据
    const count = ref(0)

    // 方法
    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}


<p>

在这个例子中，我们先导入ref，然后在setup函数里定义了一个名为count的ref类型的变量，初始值为0。在模板中通过双大括号语法绑定这个数据，并且定义了increment方法来修改count的值，注意访问ref定义的数据需要加.value。

二、使用reactive定义复杂对象数据

当要挂载一个包含多个属性的对象时，reactive就非常合适。

javascript

  <div>
    <p>{{ person.name }} - {{ person.age }}</p>
    <button>更新信息</button>
  </div>
</p>


import { reactive } from 'vue'

export default {
  setup() {
    // 定义对象数据
    const person = reactive({
      name: '张三',
      age: 20
    })

    // 方法
    const updatePerson = () => {
      person.name = '李四'
      person.age = 25
    }

    return {
      person,
      updatePerson
    }
  }
}


<p>

这里用reactive创建了一个person对象，包含了name和age属性，在模板中直接使用对象的属性进行绑定，不需要像ref那样加.value。

三、通过props接收父组件传递的数据

有时候数据是从父组件传递过来的。

javascript
// 父组件

  <div>
    
  </div>
</p>


import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMsg: '来自父组件的消息'
    }
  }
}


<p>// 子组件

  <div>
    <p>{{ msg }}</p>
  </div>
</p>


export default {
  props: ['msg']
}


<p>

在父组件中定义好数据并通过属性传递给子组件，子组件通过props接收并挂载使用。

以上就是在Vue3中挂载数据的几种常见方式，根据实际需求选择合适的方法即可。