Vue.js“扩展”使用的正确方法是啥?

Posted

技术标签:

【中文标题】Vue.js“扩展”使用的正确方法是啥?【英文标题】:What is the right way of Vue.js "extend" usage?Vue.js“扩展”使用的正确方法是什么? 【发布时间】:2017-09-14 17:20:49 【问题描述】:

用 Vue.js 2 进行实验我做了一个小项目并尝试导入一个组件,但浏览器中有一个空白页面。我想使用“扩展”来尝试这个例子:https://jsfiddle.net/xmqgnbu3/1/

所以我的 main.js 看起来像这样:

import Vue from 'vue'
import WorkZone from './components/WorkZone.vue'
import App from './App.vue'

var vm = new Vue(
    el: '#app',
    components: 
      'work-zone': WorkZone,
      'app': App
    
);

我的 App.vue 文件:

<template>
  <div id="app">
    <work-zone></work-zone>
  </div>
</template>

<script>
    import WorkZone from './components/WorkZone.vue';
    export default 
        name: 'app',
        components: 
            'work-zone': WorkZone
        ,
        data() 
          return 
        ,
        methods: 
    ;
</script>

我的 WorkZone.vue 文件:

var WorkZone = Vue.extend(
    template: `
    <div id="work-zone">
        <div id="wrapper"></div>
    </div>`,
    data() 
        return 
            tabItems: [
                title: 'Главная страница',
                project: 'Текст главная страница',
                done: false,
            ],
        ;
    ,
    methods: 
        createTab: function(newTab) 
            this.tabItems.push(newTab);
        
    
);

这个想法是稍后会有一个带有按钮的侧边栏。每个按钮都会在工作区或页面上的任何其他组件中添加一个元素。我希望这个函数(例如“function addElem()”)可以在任何组件中访问。

【问题讨论】:

在 main.js 运行的页面上是否存在 id 为 app 的元素? 出现 id="app" 的根组件。它是空的。现在我尝试添加 Vue.component('work-zone', WorkZone);到 WorkZone.vue 并将 main.js 更改为 var bizon = new Vue( el: '#app', template: '', components: App, 'work-zone': WorkZone , ); WorkZone 出现,但出现错误 Failed to mount component: template or render function not defined. 你能显示页面的 html 吗?其次,在这种情况下您不需要Vue.extend。您的 WorkZone.vue 文件应该看起来像带有模板和脚本部分的 App.vue 文件。 截图:joxi.ru/a2XZ8WnS174zxr 我认为您正在尝试将您的 vue 组件附加到 App.vue 中的元素,这是错误的并且不会起作用。您的 main.js 文件应位于具有元素 (id=app) 的父文件中。你根本不需要 App 组件,它无关紧要。 【参考方案1】:

main.js

 var WorkZone = Vue.extend(
        template: `
        <div id="work-zone">
            <div id="wrapper">
            <ul v-for="item in tabItems">
            <li> item.title </li>
            </ul>
            <button @click="createTab(title: 'Hello', project: 'World', done: false)">Create Tab</button>
            </div>
        </div>`,
        data() 
            return 
                tabItems: [
                    title: 'Главная страница',
                    project: 'Текст главная страница',
                    done: false,
                ],
            ;
        ,
        methods: 
            createTab: function(newTab) 
                this.tabItems.push(newTab);
            
        
    );

    var vm = new Vue(
        el: '#app',
        components: 
          'work-zone': WorkZone
        
    );

您的 html 文件:

<div id="app">
   <work-zone></work-zone>
</div>

【讨论】:

以上是关于Vue.js“扩展”使用的正确方法是啥?的主要内容,如果未能解决你的问题,请参考以下文章

在另一个文件中扩展类的正确方法是啥?

Vue.js:从其方法内部更改组件道具的正确方法

如何正确使用Vue.js的组件

通过 Vue.js 中的 slot-scope 将 props 传递给所有子项的正确方法

扩展 GCC asm 中多个输入和输出操作数的正确用法是啥?

如何在单文件组件中正确使用 Vue Router beforeRouteEnter 或 Watch 触发方法?