vue 组件 Vue.component 用法

定义：

组件是可复用的 Vue 实例，且带有一个名字

可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用

1. 定义一个新组件。命名为 counter

格式：

1.组件名为"conter";

2.data 数据属性：写函数;

3.template 模板：写组件的内容（元素和触发的事件）

1. Vue.component("counter",{ //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）

2. data:function(){

3. return {count:0}

4. },

5.  

6. //template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容

7. template:'点击计算点击次数：{{count}}次'

8. })

数据属性data 必须是一个返回值的函数

data: function(){

          return { count:0 }

          } 

 2.在创建的 Vue 根实例中，把这个组件作为自定义元素来使用组件

这里div 元素（faCounter）就是vue 实例的根元素。

组件counter 被作为自定义元素，嵌套在根元素 faCounter 里面

1. new Vue({

2.      el:"#faCounter"

3.     })

网页效果：

完整代码：

 

---

 

---