个性化阅读
专注于IT技术分析

vue.js框架快速入门简明教程(六):组件

假如我们写了一段html代码,如果想要在其他地方调用这这块代码块,我们只能复制多一段,这样无疑是最笨的方法,使得程序变得缓慢不说,如果我想统一修改代码块上的某个元素,就得全部修改一次,真的是蠢到家了有木有。幸好有了Vue.js,把前端程序员从愚蠢繁杂的工作中拯救了出来。

Vue.js为什么那么伟大?这篇文章将带大家去探讨一下Vue.js的强大之处。

一、什么是Vue组件?

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>
vue注册全局组件实例

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注册局部组件实例

另外,Vue.extend 是构造一个组件的构造器。充分说明了Vue.js的组件使用规则和原理,设置模板,向模板填充数据并渲染。

用于Vue.js组件的局部注册。简单的理解为Vue.extend创建的组件会自动添加到自定义的元素上。

vue组件创建渲染流程

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

例如:
<div id="extend1"></div>

var extend1=Vue.extend({
    template:'<h1>{{myname}}</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>大家好,我是{{ name1}},今年{{age1}}</span>'
    })
    
    // 注册
    // 创建根实例
    new Vue({
        el: '#app',

    })
</script>
vue-props父向子元素传递数据

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

四、自定义事件

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

和 $emit(eventName) 触发事件 例如:

<div id="app">
    <button @click="add">{{night}}</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子向父元素传递数据

以上是Vue.js强大的组件教程,结合实例大家更加容易理解和快速上手使用,会灵活的使用组件在实际项目开发中显得尤为重要,帮前端开发者们剩下了不少功夫,高效率的工作。如果本文章中什么不懂的或者存在的问题,欢迎留言指正,大家共同进步。

赞(0) 打赏
未经允许不得转载:srcmini » vue.js框架快速入门简明教程(六):组件
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏