在 JavaScript 中使用 Vue 組件數據

Question

我們應該如何從應用程序外部訪問 Vue 組件的數據？ 例如，我們如何從 Vue 應用程序外部 DOM 中的按鈕觸發的常規 JavaScript onClick 事件中獲取數據。

在下面的設置中，我有一個隱藏字段，我會隨着 Vue 應用程序中的每個操作不斷更新，這樣我就為 JS 單擊事件准備了必要的數據......但我相信有更好的方法。

目前我的設置如下：

VehicleCertificates.js

import { createApp, Vue } from 'vue'
import VehicleCertificates from './VehicleCertificates.vue';

const mountEl = document.querySelector("#certificates");
const app = createApp(VehicleCertificates, { ...mountEl.dataset })
const vm = app.mount("#certificates");

車輛證書.vue

<template>
    <div style="background-color: red;">
        <h3>Certificates</h3>
        <div>
            <table class="table table-striped table-hover table-condensed2" style="clear: both;">
                <thead>
                    <tr>
                        <th><b>Type</b></th>
                        <th><b>Valid From</b></th>
                        <th><b>Valid Till</b></th>
                        <th style="text-align: right;">
                            <a href="#" @click='addCertificate'>
                                <i class="fa fa-plus-square"></i> Add
                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(certificate, index) in certificates" :key="index">
                        <td>{{ certificate.CertificateTypeDescription }}</td>
                        <td>
                            {{ certificate.ValidFrom }}
                        </td>
                        <td>
                            {{ certificate.ValidTo }}
                        </td>
                        <td>
                            <a href='#' @click="removeCertificate(index)" title="Delete" style="float: right;" class="btn btn-default">
                                <i class="fa fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                    <tr v-show="certificates.length == 0">
                        <td colspan="4">
                            No certificates added
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import { onMounted, ref } from "vue";

    export default {
        props: {
            vehicleId: String
        },
        data() {
            return {
                count: 0,
                certificates: ref([]),
                types: []
            }
        },
        created() {
            onMounted(async () => {
                let result = await axios.get("/api/v1.0/vehicle/GetCertificates", { params: { vehicleId: this.vehicleId } });
                this.certificates.splice(0, 0, ...result.data);
                this.certificatesUpdated();
            });
        },
        methods: {
            removeCertificate(index) {
                this.certificates.splice(index, 1);
                this.certificatesUpdated();
            },
            addCertificate() {
                this.certificates.push({ CertificateTypeDescription: 'ADR', ValidFrom: 1, ValidTo: 2 });
                this.certificatesUpdated();
            },
            certificatesUpdated() {
                $("#VehicleCertificatesJson").val(JSON.stringify(this.certificates));
            }
        }
    }
</script>

最后，我希望能夠將來自 Vue 應用程序的數據與其他非 Vue 數據一起發送到 ASP.Net 核心剃須刀頁面的表單中。 Vue 應用程序只是剃刀視圖的特定部分，因此不是 SPA。

提前致謝！

Answer 1

我建議不要這樣做並將所有內容都包裝在 Vue 中或直接使用 JQuery，這取決於您的網站是如何構建的。 擁有多個前端框架通常是一個壞主意，並且會引入不必要的復雜性。

但是，如果您確實需要使用純 javascript 訪問 Vue 的數據，則可以使用以下命令：

const element = document.getElementById('#element-id');
element._instance.data // or element._instance.props, etc...

對於可用的屬性，您可以查看檢查器（請參見附加的屏幕截圖）。 檢查員截圖

Answer 2

這是一個非常復雜的解決方案 - 但至少它非常靈活。

1. 創建一個Vue.observable存儲：這不是別的，而是一個反應式對象
2. 創建要用於更新Vue實例中的observable的方法
3. 向商店添加一個watcher ：這是一個標准的Vue對象和一個$watch設置在它上面
4. 如果store發生變化，設置回調（ watcher實例）：這個回調是你可以與“外部世界”連接的地方

片段：

 const countervalueSpan = document.getElementById('countervalue') // creating a Vue.observable - // reactive object const store = Vue.observable({ counter: 0 }) // setting up a watcher function // using the Vue object function watch(obj, expOrFn, callback, options) { let instance = null if ('__watcherInstance__' in obj) { instance = obj.__watcherInstance__ } else { instance = obj.__watcherInstance__ = new Vue({ data: obj }) } return instance.$watch(expOrFn, callback, options) } // creating a watcher that reacts // if the given store item changes const subscriber = watch( store, 'counter', (counter) => { let html = `<strong>${counter}</strong>` countervalueSpan.innerHTML = html } ) new Vue({ el: "#app", methods: { increment() { store.counter++ } }, template: ` <div> <button @click="increment" > INCREMENT </button> </div> ` })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <div id="outside"> Counter outside: <span id="countervalue"></span> </div> <div id="app"></div>