vue 自定义全局、局部组件

用户7741497

发布于 2022-03-05 12:56:52

75000

代码可运行

文章被收录于专栏：hml_知识记录hml_知识记录

运行总次数：0

代码可运行

vue自定义组件分为局部组件和全局组件

全局组件

全局组件格式 template 是模板 props 是自定义组件用到的属性可以是对象也可以是数组组件的名称通常用 - 来连接，也可以像这个用大驼峰命名，但是在使用的时候，还是要使用 - 大小写之间用 - 连接，大写变成小写 Vue.component('MyComponentName', { /* ... */ })

               组件名称               
Vue.component('my-component-name', { 
      //模板
      template：` html 标签 `，
      //定义的属性名称  props可以是数组 也可以是对象
      props：["title","value"]
      props:{
               title: {
                     type: String,     //类型
                     required: false   //可以为空
                },
                value: {
                      type: Number,
                      default:0,       //默认值为0
                      required: true   //不能为空
                }
             }  
})

局部组件

每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。

局部组件在vue 实例中 components：{} 中创建创造的规则跟全局创建时一样的，局部创建只能在当前实例使用在使用组件时，在组件行类的属性前面要加上：

创建一个局部组件

 <z-counter :label="item.label" :count="item.count" v-for="(item, index) in list"  :key="index" @synccount="synccount(index,$event)"></z-counter>

在 components 中定义一个组件为z-counter 的组件 label 是标题 readonly 是只读，不能写入在组件中，定义的组件的属性props默认情况下是不能够修改的，这个时候，我在data 中定义一个中转变量

在vue实例中 data 可以是对象，也可以是一个方法，但是在组件中，data只能是一个方法data，由该方法返回一个对象因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。

new Vue({
            el: '#app',
            data: {
                list:[
                    {
                        label:"衣服",
                        count:5
                    },
                    {
                        label:"裤子",
                        count:6
                    },
                    {
                        label:"袜子",
                        count:10
                    },
                ]
            },
            methods:{
                synccount(index,e){
                    this.list[index].count=e
                },
            },
            components: {
                "z-counter": {
                    template:
                        `
                        <div class="counter">
                            <div  class="label">{{label}}</div>
                            <div class="btns">
                                <button @click="mydata--" :disabled="mydata===mincount">-</button>
                                <input type="text" v-model="mydata" class="text" readonly>
                                <button @click="mydata++" :disabled="mydata===maxcount">+</button>
                            </div>
                        </div>
                        `,
                    // props 是只读的不能修改
                    //prop 也可以是数组[属性名]
                    props: {
                        label: {
                            type: String,
                            //允许为空
                            required: false,
                        },
                        count: {
                            type: Number,
                            //不可为空
                            required: true
                        },
                        maxcount:{
                            type:Number,
                            default:999
                        },
                        mincount:{
                            type:Number,
                            default:1
                        }
                    },
                    data() {
                        return {
                            mydata: this.count
                        }
                    },
                    watch:{
                        mydata(val){
                            this.$emit('synccount',val)
                        }
                    }
                }
            },
        })

在组件中创建一个监听器，监听mydata的值，如果中值发生变化，用this.$emit把数据发送给前面，保证数据是同时跟新的第一个参数是自定义方法名，第一个参数是传回去的值 this.$emit（）自定义一个synccount 方法，方法名随意，在组件z-counter中用@synccount=""的格式写个方法来接收数据，如果需要接收多个参数，和默认参数需要在方法的参数最后面加入$event 完整格式 ↑ @synccount="synccount(index,$event)"

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序