PHP前端开发

vue3怎么读数据

百变鹏仔 2个月前 (10-30) #前端问答
文章标签 读数
在 vue 3 中读取数据的方法包括:模板中使用响应性数据;使用 ref 获取元素引用;使用 computed 计算属性;使用 watch 监听响应性数据变更;使用 provide/inject 传递数据。

Vue 3 中如何读取数据

在 Vue 3 中,有以下几种方法可以读取数据:

1. 模板中使用响应性数据:

通过使用插值语法 {{}},可以在模板中访问响应性数据。

立即学习“前端免费学习笔记(深入)”;

<template><p>{{ message }}</p></template><script>export default {  data() {    return {      message: 'Hello Vue 3!'    }  }}</script>

2. 使用 ref 获取元素引用:

ref 属性允许访问 DOM 元素或子组件的引用。

<template><input ref="input"></template><script>export default {  mounted() {    // 在挂载后获取 input 元素的引用    console.log(this.$refs.input);  }}</script>

3. 使用 computed 计算属性:

computed 属性是一种只读属性,用于根据其他响应性数据计算值。

<template><p>{{ fullName }}</p></template><script>export default {  data() {    return {      firstName: 'John',      lastName: 'Doe'    }  },  computed: {    fullName() {      return `${this.firstName} ${this.lastName}`;    }  }}</script>

4. 使用 watch 监听响应性数据变更:

watch 选项允许监听响应性数据的变化并执行回调函数。

<template><input v-model="message"></template><script>export default {  data() {    return {      message: 'Hello Vue 3!'    }  },  watch: {    message(newVal, oldVal) {      console.log('Message changed:', newVal, oldVal);    }  }}</script>

5. 使用 provide/inject 传递数据:

provide 和 inject 选项用于在祖先和后代组件之间传递数据。

<!-- 祖先组件 --><template><component-a><component-b></component-b></component-a></template><script>export default {  provide() {    return {      sharedData: 'This data is shared between components'    }  }}</script><!-- 后代组件 --><template><p>{{ sharedData }}</p></template><script>export default {  inject: ['sharedData']}</script>