H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue中template:'<App/>'及components:{App}这种写法是什么意思?

components:{App}中App变量在哪里定义的,不是只有一个App.vue的文件名吗?没找到App变量啊!!在vue的todo-list例子中:components的b写法是这样的:components:{ ‘标签名’:变量名},如components:{‘todo-list’:TodoList},此处components:{App},的写法,既没有标签,也没有变量,如何理解?
还有template的写法:template: ‘<App/>’,template中应该定义的是标签,我想问一下,<App>标签又在哪里呢?好像没有这个标签啊!

回答:

  1. 你说的components:{App}应该是在main.js入口文件中吧,这样的话App应该是App.vue组件中通过export default导出APP变量出来的,然后在main.js中通过import 导入App变量
  2. components:{App} 写法是ES6的写法,在对象中,如果键值对一样的话,只写一个就可以
  3. template: ‘<App/>’ 这里面也涉及到一个简写的处理,如果你不在组件上面添加属性或者指令的话,你就可以写成但标签的形式 <App/>其实就是 ‘ <App><App/>’
  4. <App>标签又在哪里呢 <App>这样写就是代表APP这个组件 template: ‘<App/>’就是代表使用APP组件的模板

以上属于个人理解,如有不妥欢迎拍砖

回答:

vue 模板语法是这样的:

html:
<div id='app'>
    <!-- 调用该组件之前必须先注册该组件! -->
    <test></test>
</div>

js:
new Vue({
    components: {
        // 注册 test 组件
        test: {
            template: '<div class="test">我是 test 组建内容!</div>'
        }
    }
});

上面的应该一看秒懂。你看不懂的是使用了ES6+(含)语法的代码:

// 组件
let App = {
    template: '<div>欢迎使用!</div>'
}:

new Vue({
    // template 渲染的 html
    // 这跟上面是一样的,必须先注册 App 组件
    // 然后在模板中引用
    // <App /> 是简写形式,等价于 <App></App>
    template: '<App />'
    components: {
        // es6 语法, 键名和变量名一致
        App
    }
});

ES6+语法-阮一峰

回答:

@jzsn 感谢回答!!!对您回答的第4点,还是不明白,<App>标签是不是就是App组件(App.vue)中模板的内容?

本文地址:H5W3 » vue中template:'<App/>'及components:{App}这种写法是什么意思?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址