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次

......

结束啦~

巴特西

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

Vue的组件属性：components

使用场景

最新文章

热门文章