Vue.js加载单文件组件
Vue.js加载单文件组件
提问于 2017-06-15 13:05:02
我是Vue.js新手，我想使用单文件组件，但我不理解工作流。
例如，我有三个组件：App、Grid和List
App.vue
<template>
<div id="app">
<div id="grid"></div>
<div id="right"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'Hello Vue!'
}
}
}
</script>Grid.vue
<template>
<div id="left"></div>
</template>
<script>
export default {
name: 'grid',
data: function () {
return {
grid: 'some-data'
}
}
}
</script>List.vue
<template>
<div id="right"></div>
</template>
<script>
export default {
name: 'list',
data: function () {
return {
text: 'some-text'
}
}
}
</script>Main.js
import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'
new Vue({
el: '#app',
render: h => h(App)
});
new Vue({
el: '#grid',
render: h => h(Grid)
});
new Vue({
el: '#right',
render: h => h(PatternList)
});它可以工作，但我希望这不是创建嵌套组件的正确方法。
有人能告诉我们该怎么做吗？谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-06-15 13:14:56
可以使用 method注册组件。
import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'
Vue.component('grid', Grid);
Vue.component('pattern-list', PatternList);
new Vue({
el: '#app',
render: h => h(App)
});然后使用它们的标记名将它们直接添加到App模板中：
<template>
<div id="app">
<grid></grid>
<pattern-list></pattern-list>
</div>
</template>这意味着任何Vue实例都可以将这些组件添加到它们的模板中，而无需进行任何额外的设置。
还可以将组件注册到Vue实例，如下所示：
new Vue({
el: '#app',
render: h => h(App),
components: {
'grid': Grid,
'pattern-list': PatternList
}
});或者在单个文件组件的script标记中：
<script>
import Grid from './vue/Grid.vue'
export default {
name: 'app',
components: {
'grid': Grid,
'pattern-list': PatternList
}
});
</script>这只会将组件注册到那个Vue实例，这意味着那些注册的组件只能在模板中用于该Vue实例。子组件将无法访问这些已注册组件，除非这些组件也已注册到子Vue实例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44568323
复制相关文章
相似问题
腾讯云开发者
