Java成神之路：第一帖---- Vue的组件属性components用法

Vue的组件属性：components

使用场景

一般在项目的使用过程中，某个需要多次使用的模块，会将整个模块抽取出来，写一个组件，供给其他页面进行调用或者是在一个页面中，多次使用到一个重复的代码样式，将其抽取出来，用组件来代替，以实现代码的复用性。

---

组件又分为局部注册组件和全局注册组件

全局注册组件：指的是在任何一个页面都可以进行使用的组件，例如：头部、底部

局部注册组件：本页面进行复用的代码样式 ，例如：页面中的活动模块

全局注册组件使用方法：

<script type="text/javascript">
            //自定义组件，counter是组件的名称
            var counter = {
                 template: "<button @click='num++'>你已经点击了{{num}}次</button>",
            //在组件中，data必须是返回值的函数，而不是属性，所以要用data()，且用return返回数据
                 data(){
                      return {num:0}
                 }
            }
            //全局注册组件,第一个是参数名字，第二个是组件名字
           //“”内的counter是组件的名字，也可以用其他名字，第二个counter是指代上面的组件
            Vue.component("counter",counter);
</script>

---

局部注册组件使用方法：

<script type="text/javascript">
            //自定义组件
            var counter = {
                 template: "<button @click='num++'>你已经点击了{{num}}次</button>",
                 data(){
                      return {num:0}
                 }
            }

            var vm=new Vue({
                 el:"#app",
                 //局部注册组件,第一个counter是组件的名字，第二个counter是上面组件的名字
                 components:{
                      counter: counter
                 }
            });
      </script>

---

效果为：每点击一次按钮，则num+1，意味着按钮里面的文字发生改变，也就变成了

你已经点击了0次

你已经点击了1次

你已经点击了2次

......

结束啦~