vue怎么与js互通数据-Vue.js-PHP中文网

vue怎么与js互通数据

下次还敢

发布： 2024-05-27 01:09:49

原创

1173人浏览过

Vue 与 JS 数据交互有两种主要方法。第一种方法涉及使用 prop 和 emit，其中父组件通过 prop 向子组件传递数据，而子组件通过 emit 向父组件传递数据。第二种方法涉及使用 Vuex 状态管理库，该库允许集中管理应用程序状态并提供全局访问点。Vuex 使用 dispatch 和 getters 来改变和获取 store 中的状态。

vue怎么与js互通数据

Vue 与 JS 数据交互

Vue.js 是一种流行的前端框架，它允许开发者创建交互式和可响应的 web 应用程序。Vue 与 JavaScript 之间的数据交互至关重要，以实现组件之间的沟通和应用程序状态管理。

方法 1：Prop 和 Emit

Prop: 子组件接收来自父组件的数据属性，可以用于子组件中。
Emit: 子组件通过事件向父组件传递数据，父组件可以侦听这些事件并做出响应。

示例：

立即学习“前端免费学习笔记（深入）”；

// 父组件
<template>
  <ChildComponent :message="message" @updateMessage="updateMessage" />
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello from parent!'
      }
    },
    methods: {
      updateMessage(newMessage) {
        this.message = newMessage;
      }
    }
  }
</script>

// 子组件
<template>
  <p>{{ message }}</p>
  <input v-model="newMessage">
  <button @click="emitUpdateMessage">Update</button>
</template>

<script>
  export default {
    props: ['message'],
    data() {
      return {
        newMessage: this.message
      }
    },
    methods: {
      emitUpdateMessage() {
        this.$emit('updateMessage', this.newMessage);
      }
    }
  }
</script>

登录后复制

方法 2：Vuex

Vuex: 一个状态管理库，允许集中管理应用程序状态，并提供一个全局访问点。
Dispatch: 向 Vuex store 发送突变（mutations），改变 store 的状态。
Getters: 获取 store 中的状态，不会改变 store。

示例：

立即学习“前端免费学习笔记（深入）”；

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  store
})

登录后复制

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  getters: {
    count(state) {
      return state.count
    }
  }
})

登录后复制

// component.vue
<template>
  <p>{{ count }}</p>
  <button @click="incrementCount">+</button>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['incrementCount'])
  }
}
</script>

登录后复制

以上就是vue怎么与js互通数据的详细内容，更多请关注php中文网其它相关文章！