Vue进阶（幺捌零）：JS 逻辑层向 Vue 视图层传值

前端

2023-10-18 15:50:23

前言

在项目开发过程中，组件通过 render() 函数渲染生成，并在组件内部定义了自定义拖拽指令。自定义拖拽指令实现了用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。另一个逻辑处理页面由 Vue 实现。

问题

在 JS 逻辑层和 Vue 视图层交互时，需要将 JS 逻辑层的数据传递给 Vue 视图层，以便在视图层进行展示或操作。如何实现这一数据传递是一个常见的问题。

解决方案

方法一：Vuex

Vuex 是一种状态管理库，它为 Vue 应用程序提供集中式的状态管理。使用 Vuex 可以轻松地在 JS 逻辑层和 Vue 视图层之间传递数据。

步骤：

在 Vuex 中定义一个 store，并定义一个用来存储数据的 state。
在 JS 逻辑层，使用 store.commit() 方法来修改 state 中的数据。
在 Vue 视图层，使用 $store 属性来访问和使用 store 中的数据。

方法二：Props

Props 是一种用于在父子组件之间传递数据的机制。使用 Props 可以将 JS 逻辑层的数据传递给 Vue 视图层。

步骤：

在 JS 逻辑层，创建一个 Vue 组件，并在组件的 data() 方法中定义要传递的数据。
在 Vue 视图层，将 JS 逻辑层创建的组件作为子组件，并在子组件的标签中使用 v-bind 指令传递数据。

方法三：Events

Events 是一种用于在组件之间传递数据的机制。使用 Events 可以将 JS 逻辑层的数据传递给 Vue 视图层。

步骤：

在 JS 逻辑层，创建并注册一个事件发射器。
在 JS 逻辑层，使用事件发射器发射事件，并传递数据。
在 Vue 视图层，监听 JS 逻辑层发出的事件，并在事件处理函数中接收数据。

方法四：自定义指令

自定义指令是一种用于扩展 Vue 核心功能的机制。使用自定义指令可以将 JS 逻辑层的数据传递给 Vue 视图层。

步骤：

在 JS 逻辑层，创建并注册一个自定义指令。
在 JS 逻辑层，使用自定义指令将数据绑定到 Vue 视图层的元素。
在 Vue 视图层，使用自定义指令的名称来使用 JS 逻辑层传递的数据。

具体示例

Vuex 示例

// JS 逻辑层
import Vuex from 'vuex'
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

// Vue 视图层
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
}

Props 示例

// JS 逻辑层
import Vue from 'vue'
const MyComponent = Vue.extend({
  data () {
    return {
      message: 'Hello Vue!'
    }
  }
})

// Vue 视图层
<MyComponent v-bind:message="message"></MyComponent>

Events 示例

// JS 逻辑层
import Vue from 'vue'
const emitter = new Vue()

// Vue 视图层
emitter.$on('message', (message) => {
  // 收到 JS 逻辑层发出的消息
})

自定义指令示例

// JS 逻辑层
import Vue from 'vue'
Vue.directive('my-directive', {
  bind (el, binding) {
    el.innerHTML = binding.value
  }
})

// Vue 视图层
<div v-my-directive="message"></div>