一、组件的基本使用

1.1 注册组件

注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传入这个组件的配置

1
2
3
4
5
6
7
8
Vue.component('mycomponent',{
template: `
这是一个自定义组件
`
,

data () {
return {
message: 'hello world'
}
}
})

如上方式,就已经创建了一个自定义组件,然后就可以在Vue实例挂在的dom元素中使用它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
<mycomponent>mycomponent>
<my-component>my-component>
div>
<script>
var app = new Vue({
el: '#app',
data: {
},
components: {
'my-component': {
template: `<div>这是一个局部的自定义组件,只能在当前Vue实例中使用div>`,
}
}
})
script>

直接使用Vue.component()创建的组件,所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件

1
2
3
4
5
6
7
8
9
10
var app = new Vue({
el: '#app',
data: {
},
components: {
'my-component': {
template: `
这是一个局部的自定义组件,只能在当前Vue实例中使用
`
,

}
}
})

1.2 模板的要求

注意:组件的模板只能有一个根元素。下面的情况是不允许的

1
2
template: `
这是一个局部的自定义组件,只能在当前Vue实例中使用

`,

1.3 组件中的data必须是函数

  • 可以看出,注册组件时传入的配置和创建Vue实例差不多,但也有不同,其中一个就是data属性必须是一个函数
  • 这是因为如果像Vue实例那样,传入一个对象,由于JS中对象类型的变量实际上保存的是对象的引用,所以当存在多个这样的组件时,会共享数据,导致一个组件中数据的改变会引起其他组件数据的改变。
  • 而使用一个返回对象的函数,每次使用组件都会创建一个新的对象,这样就不会出现共享数据的问题来了

1.4 关于dom模板的解析

当使用 dom 作为模版时 (例如,将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素

      限制了能被它包裹的元素,而一些像 这样的元素只能出现在某些其它元素内部

      • 在自定义组件中使用这些受限制的元素时会导致一些问题,例如
      1
      2
      3
      <table>
      <my-row>...my-row>
      table>
      • 自定义组件 被认为是无效的内容,因此在渲染的时候会导致错误。这时应使用特殊的 is 属性
      1
      2
      3
      <table>
      <tr is="my-row">tr>
      table>

      也就是说,标准HTML中,一些元素中只能放置特定的子元素,另一些元素只能存在于特定的父元素中。比如table中不能放置divtr的父元素不能div等。所以,当使用自定义标签时,标签名还是那些标签的名字,但是可以在标签的is属性中填写自定义组件的名字

      应当注意,如果您使用来自以下来源之一的字符串模板,这些限制将不适用