VUE从入门到入坑—05.自定义局部|全局组件 / 自定义事件$emit


上篇:VUE从入门到入坑—04.v-model指令 / 事件绑定指令 / 修饰符 / 深度响应式

一、什么是组件

组件就是零件,将零件组装成想要的工具(页面),组件是vue.js最强大的功能之一,它可以扩展html元素,封装可重用的代码,通过传入对象的不同,实现组件的复用。

1.定义全局组件
全局组件:使用Vue.component来创建全局组件,可以用在创建的 Vue 根实例 (new Vue) 的模板中,任何方式,任何地点都可以使用的标签组件。

Vue.component('mx-box', {
       template:`
       <div>
           <h1>标题</h1>
       </div>
       `,
       props:{ },
       data() {
           return { }
       }           
})
new Vue({ el: '#app' })
<div id="app">
     <mx-box> </mx-box>
</div>

2.定义局部组件

只能在定义它的el中使用,不能在其他位置,否则就会失效。

new Vue({
  el: '#app',
  components: {
       // 自定义组件名
       'mx-box': {
         template:`
         <div>
             <p> hello </p>
         </div>
         `,
         props:{ },
         data() {
             return { }
         }       
       }
  }
})
<div id="app">
     <mx-box> </mx-box>
</div>

(1)components选项中定义局部组件。每个组件就是一个小型的Vue实例,它里面除了不能设置el选项,其他选项它都有。
(2)组件名称:自定义,可以使用驼峰命名方式或者短横线的命名方式,但是需要注意的是如果应用到DOM中,就只能用短横线命名的方式,否则就会报错。注意组件的名称不要跟原生html元素重名。
(3)template选项:定义组件的模板。模板中必须包含一个根标签。
(4)props选项:定义组件标签上的属性。驼峰命名法的 prop 名(postTitle)需要使用其等价的短横线分隔命名法(post-title)命名。注意:props是只读的,不能修改(解决办法:在data中对props接收到的数据进行中转)。
(5)props的值可以是一个字符串数组,里面定义每一个标签属性名称,这是简单用法,不能对属性做严格的验证。例如:props:["count"]。
(6)props的值可以是一个对象,里面定义每个标签属性名称,以及对应的类型。例如:props:{ count:Number }。
(7)props的值可以是一个对象,里面定义的每个标签属性名称也可以是一个对象,在这个对象里面定义该属性的完整信息。type 定义类型,required 非空,default 默认值。例如:props: {count: { type: Number, required: true, default: 1 } }
(8)data:定义组件的数据。注意:Vue实例的data选项可以是一个对象,也可以是一个方法,由该方法返回一个对象。 但是在组件中,data选项必须是一个方法,由该方法返回一个对象。因为组件可能会使用很多次,如果data选项是对象的话,会导致多个组件使用了同一份数据。

二、全局组件和局部组件的区别

全局:可以再页面中任何位置使用。
局部:只能在定义它的el中使用,不能在其他位置,否则就会失效。
定义方法
全局:可以使用Vue.component(tagName,options)定义。
局部:可以通过Vue实例中component属性定义局部组件。
是否挂载:全局组件在扩展元素用于封装复用代码时不需要挂载,但是不常见,因为会影响浏览器的性能 局部组件必须手动挂载,否则会失效。
其他 局部组件中代码的编写是”components“,而全局组件中是”component“ 。

三、$emit()自定义事件

Vue为每个组件对象提供了一个内置方法:$emit,作用:子组件向父组件传值,触发自定义事件,注意:事件名称中不能采用大写字母。

// 触发一个自定义事件,事件名称是synccount,将val作为事件对象传出去
this.$emit('synccount',val)
<mx-box @synccount="synccount(doSomething)"> </mx-box>

四、练习,counter组件

    <div id="app">
        <ul class="list">
            <li v-for="(item,index) in list" :key="index">{{item.label}}--{{item.count}}</li>
        </ul>
        <b-counter v-for="(item,index) in list" :key="index" :label="item.label" :count="item.count"
            @synccount="synccount(index,$event)"></b-counter>
    </div>
        new Vue({
            el: '#app',
            // 定义数据
            data: {
                list: [
                    {  label: '衣服',count: 5  },
                    {  label: '裤子',count: 8  },
                    {  label: '鞋子',count: 3  },
                    {  label: '袜子',count: 10  }
                ]
            },
            methods: {
                synccount(index, e) {
                    // 同步更新商品的数量
                    this.list[index].count = e
                }
            },
            // 注册组件
            components: {
                'b-counter': {
                    template: `
                    <div class="counter">
                        <div class="label">{{label}}</div>
                        <div class="btns">
                            <button @click="myCount--" :disabled="myCount===minCount">-</button>
                            <input readonly class="text" type="text" :value="myCount">
                            <button @click="myCount++" :disabled="myCount===maxCount">+</button>
                        </div>
                    </div>
                    `,
                    //props选项
                    props: {
                        // 文本
                        label: {
                            type: String,
                            // 允许为空
                            required: false,
                        },
                        // 数量
                        count: {
                            type: Number,
                            // 非空
                            required: true
                        },
                        // 最大值
                        maxCount: {
                            type: Number,
                            default: 999
                        },
                        // 最小值
                        minCount: {
                            type: Number,
                            default: 1
                        }
                    },
                    //定义数据
                    data() {
                        return {
                            // 将props接收到的count,中转给myCount
                            myCount: this.count
                        }
                    },
                    // 监听器
                    watch: {
                        // 侦听myCount是否发生变化
                        myCount(val) {
                            // 触发一个自定义事件synccount,将count的最新值作为事件对象传出去
                            this.$emit('synccount', val)
                        }
                    }
                }
            }
        })

效果:

五、练习,评分组件

    <div id="app">
        <ul class="list">
            <li v-for="(item,index) in list" :key="index">{{item.title}}--{{item.value}}</li>
        </ul>
        <b-star v-for="(item,index) in list" :key="index" 
        :title="item.title" :value="item.value" @syncvalue="syncvalue(index,$event)"></b-star>
    </div>
        // 注册全局组件
        Vue.component('b-star', {
            //模板
            template:`
            <div class="star">
                <div class="title">{{title}}</div>
                <div>
                    <i v-for="item in 10" :key="item" class="iconfont" 
                    :class="item<=myValue?'icon-xingxing':'icon-star'"
                    @mouseenter="enter(item)" @mouseleave="leave(item)" @click="okValue=item"></i>
                </div>
            </div>
            `,
            // 定义组件的标签属性
            props:{
                title:{
                    type:String,
                    required:false
                },
                value:{
                    type:Number,
                    default:0
                }
            },
            // 数据
            data() {
                return {
                    // 中转props传进来的value值
                    myValue:this.value,
                    // 定义一个确定值
                    okValue:this.value
                }
            },
            // 方法
            methods: {
               // 鼠标进入时,调用的方法
                enter(val){
                    this.myValue = val
                },
               // 鼠标离开时,调用的方法
                leave(val){
                    this.myValue = this.okValue
                }
            },
            // 监听器
            watch:{
                // 侦听okValue的变化
                okValue(val){
                    // 触发自定义事件
                    this.$emit('syncvalue',val)
                }
            }
        })
        new Vue({
            el:'#app',
            data:{
                list:[
                    {
                        title:'产品质量',
                        value:5
                    },
                    {
                        title:'物流速度',
                        value:7
                    },
                    {
                        title:'客服态度',
                        value:2
                    }
                ]
            },
            methods: {
                // 同步评分
                syncvalue(index,e){
                    this.list[index].value = e
                }
            },
        })

效果:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容