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 中的 slot-scope 将 props 传递给所有子项的正确方法