Vue组件整理一

组件说明

• 组件是可复用的Vue实例,可以把组件作为自定义元素来使用.组件可进行任意次数的复用.
• 组件的data必须是一个函数.
• 由于html不区分大小写,所以组件命名最好使用羊肉串命名法
• 通过Prop向子组件传递数据,一个组件默认可以拥有任意数量的prop,任何值都可以传递给任何prop
• 每个组件最好只有一个根元素

prop传值

// html部分
<gift-list :list="list"></gift-list>
// 组件定义
Vue.component('gift-list', {
    props: {
        list: {
            type: Array,
            default: []
        }
    },
    data: function () {
        return {
            title: 'gift-list组件标题'
        }
    },
    template: `
        <div>
            <h3>{{title}}</h3>
            <p v-for="item in list">{{item}}</p>
        </div>
    `
});
// 父组件传值
data: {
    list: [{
        name: '玫瑰一束'
    }, {
        name: '零食一包'
    }]
},

• prop的大小写html中的attribute名是大小写不敏感的.

// 1.以字符串数组的形式列出
props:['list']
// 2.指定prop的值类型,以对象形式列出prop,同时可以指定验证要求
props: {
    list: {
        type: Array,
        default: [], // 默认一个空数组
        validator: function (value) { // 自定义验证函数
        }
    }
},

自定义事件监听子组件

• 子组件通过调用内建的$emit方法,并传入事件名称来触发一个事件@click="$emit('get')"
• 父组件中通过v-on监听子组件实例的任意事件
• 子组件还可以在$emit的第二参数传递一个值

// html部分
<gift-get v-on:get="getPrice"></gift-get>
// 子组件部分
Vue.component('gift-get', {
    template: `
        <div>
            <button @click="$emit('get','arg')">点击查看礼物价格</button>
        </div>
    `
});
// 父组件部分
methods: {
    getPrice(e) {
        console.log('获取礼物价格', e);
        // e 即传递的参数 'arg'
    },
}

在子组件中使用v-model

• 自定义事件也可以用于创建支持v-model的自定义输入组件

// <input v-model="value">" 这包含了两个操作1. v-bind:value="value",2. v-on-input="value = $event.target.value"
//  所以当子组件使用v-model时,1.将value的属性 绑定到名为value的prop上,2.当input事件触发时,将新的值通过自定义的input事件抛出
// html部分
<gift-input v-model="value"></gift-input>
<gift-add v-on:add="addGift"></gift-add>
// 子组件部分
Vue.component('gift-input', {
    props: ['value'],
    template: `
        <div>
            <input placeholder="请输入要增加的礼物名称" :value="value" v-on:input="$emit('input',$event.target.value)"/>
        </div>
    `
})
Vue.component('gift-add', {
    template: `
        <div>
            <button @click="$emit('add')">增加一个礼物</button>
        </div>
    `,
})
// 父组件部分
data: {
    list: [{
        name: '玫瑰一束'
    }, {
        name: '零食一包'
    }],
    value: ''
},
methods: {
    addGift() {
        console.log(this.value)
        this.list.push({
            name: this.value
        });
    }
}