时间戳

首页 > 解决方案 > 在子 javascript 中向 vuejs 实例添加新方法

vue.js - 在子 javascript 中向 vuejs 实例添加新方法

问题描述

我有一个带有变量的父 javascript P1.js 和一个带有变量parentVue的子 javascript C1.js。childVue

我想通过parentVue以childVue某种方式扩展parentVue. 这可以做到吗？

var parentVue = new Vue({
    el: '#idAppointmentDetails',
    
    methods: {
        f1: function () {
            console.log('f1');
        },
    },
});

var childVue = Vue.extend({
    methods: {
        f2: function () {
            console.log('f2');
        },
    },
});

我在构建时不知道 f2，parentVue所以我不想探索将 mixin 添加到parentVue.

标签： vue.js

解决方案

我无法向父 Vue 实例添加新方法。

所以我在子js中创建了一个新组件：

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";


Vue.component('notes-edit-comp', {
    props: ['appnt', 'updateapi'],
    data: function () {
        return {
            successUrl: null
        }
    },
    methods: {
        saveNotesClicked: async function () {
            console.log('saveNotesClicked', this.updateapi);
            window.location.href = detailViewSuccessRedirectUrl;

        }
    },
    template: `
    <div id="idEditNotes" >
        <div class="form-group">
            <label for="idNotes">Notes</label>
            <textarea class="form-control" rows="6" v-model="appnt.notes"
                      style="max-width: 40rem;"
                      placeholder="xyz"
                      id="idNotes"></textarea>
        </div>

        <div>
            <button class="btn btn-outline-success"
                    v-on:click="saveNotesClicked()"
            >save
            </button>
        </div>
    </div>
  `,
    delimiters: ["[[", "]]"],
})

推荐阅读