《实战：如何使用Vue2.0开发一个npm组件库》- 3、vue组件开发

1、命名规则

大驼峰，例如：MyTestComponent.vue。src/components 文件夹下。

2、组件基本信息

1、界面

2、属性

3、方法

4、事件

5、插槽(可选)

3、示例说明

1、name 属性必须定义，且与文件名一致；

2、props属性要定义 type 和 default；

3、外部方法用 小驼峰 定义，内部方法以下划线 _ 开头的小驼峰 定义；

4、注意<template> 下的一级标签不要定义class样式，在调用时再使用；

<template>
    <div>
        <el-tag>{{tag}}</el-tag>
        <el-input v-model="value" style="width:200px;"></el-input>
        <el-button @click="_onClick" type="primary">点击</el-button>
    </div>
</template>

<script>
export default {
    name: 'GmTest',
    props:{
        tag: {
            type: String,
            default: '说明'
        }
    },
    data () {
        return {
            value: ''
        }
    },
    methods: {
        _onClick() {
            this.$emit('on-click', this.value);
        }
    }
}
</script>

<style scoped>

</style>