首页 > 代码库 > Vue 什么是组件

Vue 什么是组件

Vue.js组件
  组件的作用:组件是自定义元素,可扩展html元素,封装可复用的代码。
  组件的注册一定要在初始化根实例之前,负责组件是不起作用的。
  全局组件在初始化实例的时候被使用
  局部组件仅在实例/组件作用域中可用

1、组件的注册

  

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4         <meta charset="UTF-8">
 5          <title></title>
 6          <script type="text/javascript"  src="vue.js"></script>
 7      </head>
 8  <body>
 9      <div id="id">
10         <global></global>
11         <father></father>
12      </div>
13  </body>
14  <script>
15        Vue.component(global,{
16            template: <div>注册全局组件</div>
17        })
18 
19        var partial = { //局部组件仅在一个实例/组件的作用域中可用
20            template: <div>注册局部组件</div>
21        }
22 
23        new Vue({
24            el: #id,
25            components:{
26                father:partial
27            }
28        })
29      </script>
30  </html>

2、DOM模板解释说明

当使用 DOM 作为模版时(例如,将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ,<ol><table> ,<select> 限制了能被它包裹的元素, 而一些像 <option> 这样的元素只能出现在某些其它元素内部。

这时需要用到特殊的is属性

<table>
  <my-row>...</my-row>
</table>
<!--上面的组件是无效的-->


<table>
  <tr is="my-row"></tr>
</table>
<!--上面的组件使用is属性才能被解析->

3、通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外,它必须是函数。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4         <meta charset="UTF-8">
 5          <title></title>
 6          <script type="text/javascript"  src="vue.js"></script>
 7      </head>
 8  <body>
 9      <div id="id">
10          <simple-counter></simple-counter>
11          <simple-counter></simple-counter>
12          <simple-counter></simple-counter>
13      </div>
14  </body>
15  <script>
16      var data = { counter: 0 }
17      Vue.component(simple-counter, {
18          template: <button v-on:click="counter += 1">{{ counter }}</button>,
19          // 技术上 data 的确是一个函数了,因此 Vue 不会警告,
20          data: function () {
21              //所有组件都是返回同意个对象
22            //  return data
23              //为每个组件返回全新的对象
24              return{
25                  counter:0
26              }
27          }
28      })
29 
30        new Vue({
31            el: #id
32        })
33      </script>
34  </html>

 

Vue 什么是组件