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

Vue 什么是组件

2024-09-23 03:04:30   215人阅读

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 什么是组件


联系
我们