vue.js组件初学者快速入门

 

这章我们将要来学习什么是vue组件,以及Vue.js组件中的全局组件和局部组件,局部组件,和自定义事件。

一.什么是组件?

Vue.js组件是Vue.js 最强大的功能之一。Vue.js组件可以扩展HTML元素,什么意思呢?就是为html新增标签,就像html5那样加入了全新的结构型元素,例如页眉header,页脚footer,导航nav,内容article,章节section等。而Vue.js组件扩展HTML的元素是你为该项目注册的。此外Vue.js可以封装可重用的代码,在需要的之后只需要直接引入就可以。来看看注册Vue.js组件。

二.Vue.js组件中的全局组件和局部组件

就像javascript定义变量,Vue.js组件注册也有区分全局和局部组件。

1、全局组件

全部组件就是可以在任意Vue.js示例下使用的,在Vue.js中调用Vue.js.component()注册的组件是全局的。 注册一个全局组件语法格式如下:

Vue.js.component(tagName, options)

tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

<tagName></tagName>

例如:把id=template1中的模版插入到已经注册的goodnight组件中。

<div id="app">
    <goodnight></goodnight>
    <goodnight></goodnight>
    <goodnight></goodnight>
</div>

<template id="template1">
    <div>
        <h3>goodnight</h3>
        <button id="btn">Submit</button>
    </div>
</template>

</body>
<script>
    // 注册
    Vue.component('goodnight', {
        template: '#template1'
    })
    // 创建根实例
    new Vue({
        el: '#app'
    })
</script>

2、局部组件

如果在实际项目中不需要全局注册,或者是想让组件使用在其它组件内,可以用选项对象的components属性实现局部注册。

例如:模版只能在goodnight里面用,在good组件是用不了的。

<div id="app">
    <goodnight></goodnight>
    <goodnight></goodnight>
    <good></good>
</div>

<template id="template1">
    <div>
        <h3>goodnight</h3>
        <button id="btn">Submit</button>
    </div>
</template>

</body>
<script>

    var template1 = {
        template: '#template1'
    }
    // 注册
    // 创建根实例
    new Vue({
        el: '#app',
        components:{
        'goodnight': template1,
        }
    })
</script>

另外,Vue.extend 是构造一个组件的构造器。充分说明了Vue.js的组件使用规则和原理,设置模板,向模板填充数据并渲染。 用于Vue.js组件的局部注册。简单的理解为Vue.extend创建的组件会自动添加到自定义的元素上。

用法:Vue.extend ( options ),options 是对象;

例如:

<div id="extend1"></div>

var extend1=Vue.extend({
    template:'<h1></h1>',
    data(){
        return {
            myname:'vue.js局部组件使用'
        }
    }

})

var extend2=new extend1();
extend2.$mount('#extend1')

三.自定义属性prop

组件实例之间的作用于是独立的,相互之间不能进行数据的传递,那如果一个子组件需要应用父组件的数据,应该如何来进行数据传递呢?在Vue.js中,可以通过设置父组件的属性prop,自定义地把数据传递给子组件。

例如:

<div id="app">
    <my-component message="hello" name="vue.js" age="18"></my-component>
</div>

</body>
<script>

    Vue component('my-component', {
        // 声明 props
        props: ['message','name','age'],
        
        data:function(){
          return {
              message1:this.message,
              name1:this.name,
              age1:this.age
          }
        },
        template: '<span>大家好,我是,今年</span>'
    })
    
    // 注册
    // 创建根实例
    new Vue({
        el: '#app',

    })
</script>

其实props是收取父组件的数据,并且可以通过实例创建子组件的方式传递给子组件并渲染模版。prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态而发生数据错误。

四.自定义事件

那在实际项目中,是需要把子组件要把数据传递回去给父组件,那怎么办?不是说props是单向绑定的吗?这时候,就不用prop 了,子组件要把数据传递给父级 依靠自定义事件。 $on(eventName) 监听事件 和 $emit(eventName) 触发事件

例如:

<div id="app">
    <button @click="add"></button>
</div>

</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            night:"晚上好"
        },
        methods:{
            add:function(){
                this.$emit('text','我睡了');
            }

        }
    });
    app.$on('text',function(value){
        console.log(value);
    })

</script>

以上是Vue.js强大的组件教程,结合实例大家更加容易理解和快速上手使用。 关于组件更加深入的了解请移步到:深入了解vue组件——从注册到使用

本文为博主原创文章,知识共享,开源精神,转载注明出处。