vue.js中组件的创建和使用方法

vue.js中创建组件有三个步骤:创建组件构造器,注册组件以及使用组件。

一、创建组件构造器

  创建组件构造器的方法很简单,只需要以下语句即可:
  var MyCompontent=Vue.extend({...});
  然而这个时候还不能直接使用组件,需要把组件注册到应用中。

二、注册组件

  Vue.js提供了两种注册组件的方式,分别为全局注册和局部注册,下边分别介绍:

  全局注册:需要确保在根实例初始化之前注册,这样才能使组件在任意实例中都可以使用。注册方式如下:
  Vue.component('my-component',MyComponent);//此句一定要放在new Vue({...});之前
  注册过程中也指定了组件的HTML标签。本例为<my-component>;

  局部注册:限定了组件只能在被注册的组件中使用,而无法在其他组件中使用。

三、使用组件

  基于以上对组件的介绍,下边以一个具体的例子说明组件的使用方法。
  全局注册使用方法:
<div id="app">
    <my-component></my-component>
</div>
<script src="vue.js"></script>
<script>
    /*创建组件构造器*/
    var MyComponent = Vue.extend({
        template: '<p>This is a component</p>'
    });
    /*全局注册组件*/
    Vue.component('my-component', MyComponent);
    /*使用组件*/
    var vm = new Vue({
        el: '#app'
    })
</script>


  局部注册使用方法:
<div id="app">
    <my-component></my-component>
</div>
<script src="vue.js"></script>
<script>
    var child = Vue.extend({
        template: '<p>This is a component</p>'
    });
    var vm = new Vue({
        el: '#app',
        components: {
            'my-component': child
        }
    });
</script>


  以上代码最终在浏览器的中的渲染结果相同。只是全局注册的my-component标签可以在HTML文档中任何地方使用,而局部注册的my-compoment标签只能在id为app的容器下使用。

四、语法糖表示法

  vue.js对于以上两种注册方法提供了简化方法,我们可以在注册组件的时候定义组件构造器。举例如下:
<div id="app">
    <my-component></my-component>
</div>
<script src="vue.js"></script>
<script>
    /**全局注册
     Vue.component('my-component', {
        template: '<p>This is a component</p>'
    });
     new Vue({
        el: '#app'
    });*/
        //局部注册
    new Vue({
        el: '#app',
        components: {
            'my-component': {
                template: '<p>This is a component</p>}'
            }
        }
    })
</script>


  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值