Vue.js加载单个文件组件
问题描述:
我是Vue.js的新用户,想要使用单个文件组件,但我不了解工作流程。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)
});
它的工作原理,但我希望这不是创建嵌套组件的正确途径。
任何人都可以展示它应该完成的方式吗?使用Vue.component
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实例。
非常感谢!那就是我正在寻找的东西。 – Dmitry