Vue.js 学习笔记十三自定义组件

在Vue中可以自定义组件。

1. template(自定义html内容)

　　有多种定义方式，我推荐下面这种，有html提示，比较方便，不容易出错。

　　需要注意的有：

　　　　1.1 如果组件别名是驼峰命名法myCom1，则使用的标签要写成<my-com1></my-com1>,有点麻烦，建议用小写。

　　　　1.2 template标签中的html内容，必须全部包含在一个 最外层 元素中，不可以有2个 最外层 元素，下例如果把div去掉，h3和h5就都变成 最外层 了，会报错。

<div id="divApp">
        <!--以标签的方式使用自定义组件-->
        <mycom1></mycom1>
    </div>
    <!--在被控制的元素外定义template的html内容-->
    <template id="tmp1">
        <div>
            <h3>外部定义的template组件</h3>
            <h5>没错！</h5>
        </div>
    </template>
    <script>
        //定义组件别名：mycom1，以及template对应的id：tmp1
        Vue.component('mycom1', {
            template: '#tmp1'
        })

        var v = new Vue({
            el: '#divApp',
            data: {
            },
            methods: {}
        })
    </script>

以上是公共组件的定义和使用，私有组件的话，直接在Vue的实例中用components函数定义即可，这里我把html内容直接写在函数里了，但是不推荐这样，因为会没有提示。

var v = new Vue({
            el: '#divApp',
            data: {
            },
            methods: {},
            components:{
                mycom2: {
                    //template:'#tmp2'
                    template:'<h1>私有组件</h1>'
                }
            }
        })

使用方式跟公共组件一样，只不过因为是私有的，所以只能在定义的Vue实例的控制容器中使用。

 <div id="divApp">
        <!--以标签的方式使用自定义组件-->
        <mycom1></mycom1>
        <mycom2></mycom2>
    </div>

2. data

template定义Html内容，data可以定义数据部分，注意组件中的data必须是function,返回一个对象，不能像Vue实例中的data那样直接写成对象。

 //定义组件别名：mycom1，以及template对应的id：tmp1
        Vue.component('mycom1', {
            template: '#tmp1',
            data: function () {
                return {
                    msg:'组件的data中的msg'
                }
            }
        })

使用的方式很简单，在template标签里直接用{{}}的方式调用就行了，跟调用Vue实例的data中的属性一样，但是只能在对应的template标签中这么用。

<template id="tmp1">
        <div>
            {{msg}}
            <h3>外部定义的template组件</h3>
            <h5>没错！</h5>
        </div>
    </template>

3.methods

组件中还能定义方法，跟Vue实例中定义一样

//定义组件别名：mycom1，以及template对应的id：tmp1
        Vue.component('mycom1', {
            template: '#tmp1',
            data: function () {
                return {
                    msg:'组件的data中的msg'
                }
            },
            methods: {
                changeText() {
                    this.msg = '我改了你的内容';
                }
            }
        })

使用也完全一样

 <div>
            {{msg}}
            <h3>外部定义的template组件</h3>
            <h5>没错！</h5>
            <input type="button" value="点我修改" v-on:click="changeText" />
        </div>

Vue.js 学习笔记十二 Vue发起Ajax请求

Vue.js 学习笔记 十三 自定义组件

猜你喜欢

Vue.js 学习笔记十三自定义组件