前端 - 求教 Vue 组件的使用问题
本文介绍了前端 - 求教 Vue 组件的使用问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
一直使用单文件的方式构建 Vue 项目，今天因为各种原因需要用非构建方式编写 Vue 代码，遇到一个问题：
比如 HTML 为：
<body>
<app>
<child></child>
</app>
</body>JS 为：
// Child.
const Child = Vue.extend({
template: '<h1>This is the children.</h1>'
});
// App.
const App = Vue.extend({
data () {
return {...}
},
components: {
Child
}
});
// Root Instance.
Const Root = new Vue({
el: 'body',
components: { App }
});这样写是找不到 child 的，不过好像有两种方法：
在
Root中注册child.（或全局注册）在
App的template中引入child而不是 HTML 中.
但是如果用第一种方式， child 组件并不听从 app 组件内的 data，而是听从于 Root 中的 data，比如 <child :show="loading" v-if="loading"></child>，传入的 loading 不是从 app 中来的而是从 Root 中的，这和用 单文件 + Webpack 组织的 Vue 项目行为完全不同；
至于第二个问题，如果想在 HTML 中写好组件标签而不是写到 template 中，这样是不可以的么？
希望各位能指点一二，感激不尽！
解决方案
给 App 加上 inline-template：
<app inline-template>
<child></child>
</app>这样就和 .vue 文件里的 <template></template> 行为一致了.
参看：内联模板
这篇关于前端 - 求教 Vue 组件的使用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
