时间戳

首页 > 技术文章 > Vue——自定义组件（原生代码实现）

Vue——自定义组件（原生代码实现）

chenss15060100790 2018-03-20 21:34 原文

这里介绍的就是Vue的第三个特点：模块化开发，在开发过程中，每一个新的点子，都可以进行封装，形成资产，在未来需要的时候进行调用。

这个特点准确地说是node.js的特点，不过我们用的是Vue，因此需要用Vue的规则进行封装，Vue的语法，是我们要学习的重点。

 

本篇的案例未使用脚手架，使用传统方式开发，但是语法一致。

学习主要主要包括这几点：

  • 代码模版（html脚本）
  • 参数设置（调用组件的时候，需要传递进来的参数）
  • 事件回调（案例：我们的组件内部有一些按钮，需要触发父级组件一些事件）

 

代码模版

通过components进行组件定义，使用template设置代码模版。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app1">
    <view1></view1>
    <view2></view2>
</div>
<div id="app2">
    <view1></view1>
    <!--在这里view不显示-->
    <view2></view2>
</div>
<script>
    // 全局组件
    Vue.component('view1', {
        template: '<h5>组件1</h5>'
    })
    // 局部组件
    var Child = {
        template: '<h4>组件2</h4>'
    }
    // 创建根实例
    new Vue({
        el: '#app1',
        components: {
            // <view2> 将只在父模板可用，只在app1设置局部组件
            'view2': Child
        }
    })
    new Vue({
        el: '#app2',
    })
</script>
</body>
</html>

参数设置

自定义组件的时候，需要告诉别人，调用我们的组件，需要传递什么参数，

使用prop（Property的缩写）为代码模版设置传值参数。

参数可以指定类型，分为String、Number、Boolean、Function、Object、Array，还可以指定是否必传，设置默认值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component :num="1313"></my-component>
</div>

<script>
    new Vue({
        el: '#app',
        components:{
            'my-component': {
                //代码模版
                template:'<div>{{num}}</div>',
                props:{num:{
                    //可以设置多种类型
                    type:[String,Number],
                    // 是否必传
                    required: true,
                    // 默认值
                    default:'empty'
                }}
            }
        }
    })
</script>
</body>
</html>

事件回调

我们知道，要绑定<button>的点击事件，需要用@click进行绑定，如果我们自定义组件中，也想提供一个点击事件，要怎么做呢？

这时候，就要使用下面两个语法了：

  • 使用 $on(eventName) 事件的侦听事件，如果触发了$emit(eventName)，之后就会接着触发$on(eventName)
  • 使用 $emit(eventName) 触发事件，子页面触发父页面的事件

需要发送事件的模版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <div id="counter-event-example">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
</div>

<script>
    new Vue({
        el: '#counter-event-example',
        components: {
            'button-counter': {
                //定义一个特殊的模版，维护一个内部数据counter，每次点击，counter加1
                //这个时候，如果期望外部侦听到counter的变化，可以使用事件回调，下一个Demo展示如何传递消息
                template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
                data: function () {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    incrementHandler: function () {
                        this.counter += 1
                    }
                }
            }
        }
    })
</script>
</body>
</html>

事件回调

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <div id="counter-event-example">
        <p>{{ total }}</p>
        <!--increment侦听到消息，调用incrementTotal()函数-->
        <button-counter  v-on:increment="incrementTotal"></button-counter>
        <button-counter  v-on:increment="incrementTotal"></button-counter>
    </div>
</div>

<script>
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                //修改total的值
                this.total += 1
            }
        },
        components: {
            'button-counter': {
                //点击的时候调用incrementHandler()函数
                template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
                template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
                data: function () {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    incrementHandler: function () {
                        this.counter += 1;
                        //对外发送事件，发送给increment侦听器
                        this.$emit('increment')
                    }
                }
            }
        }
    })
</script>
</body>
</html>

 

推荐阅读