开发者学堂课程【Vue.js 入门与实战:组件定义方式的复习】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8184
组件定义方式的复习
复习组件定义的方式
1.<script>
//定义组件的时候,如果要定义全局的组件,Vue.component(‘组件的名称’,组件的模板对象)
只是在创建模版对象的时候,定义各不相同,例如:
<script>
//定义组件的时候,如果要定义全局的组件,Vue.component(‘组件的名称’,{})
<script>
//定义组件的时候,如果要定义全局的组件,Vue.component(‘组件的名称’,Vue.extend({}))
其实在本质上,定义的时候,都是通过 Vue.component 来定义。这也是最简单的定义方式。
2.<template>
</template>
<script>
//定义组件的时候,如果要定义全局的组件,Vue.component(‘组件的名称’,Vue.extend({template: ‘’
}))
//通过对象字面量的形式,定义了一个 组件模板对象
3.
var login = {
temlate:
’
<h
1
>123
4
</h
1
>
’
}
//通过 Vua.component 把组件模型对象,注册为一个全局的Vue组件,同时,为这个组件起了一个名称,可以让我们通过标签形式,在页面中直接引入这个组件
//Vue.component(
‘
mylogin
’
,login)
右键浏览,可以得到以上执行结果。没有报错。
以上是先定义一个组件模版对象,再吧组件模版对象通过 Vue.component 注册为一个全局的Vue组件。既然可以定义为全局的,也可以定义为私有的。此时代码如下:
//创建Vue实例,得到 ViewModel
var vm =new Vue({
el:
‘
#app
’
,
data: {}
components: {
//‘组件的名称’:组件的模板对象
//‘mylogin’:login
login
}
});
</script>
</body>
此时执行也可以得到正确的执行结果。
如此可以总结:
如果只想拿到一个组件模版对象,而并不想起名字,可以采用第一种简单的代码方式;如果想要既拿到一个模版对象,又拿到一个可以用标签来引用的组件,则组要通过 Vue.component 来实现。