VueVue

ref、props、mixin、插件、scoped

2021-09-01  本文已影响0人  卑微小李学前端

ref属性

  1、被用来给元素或子组件注册引用信息(id的替代者)

  2、应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)

  3、使用方式:

         打标识:<h1 ref = "XXX">.....</h1>或  <School ref="xxx"/>

         获取:this.$refs.xxx

配置项props

  功能:让组件接受外部传过来的数据

        (1)、传递数据

              <Demo name="xxx"/>

        (2)、接受数据

              第一种方式(只接受):

              props:['name']

            第二种方式(限制类型):

            props:{

                name:Number

            }

            第三种方式(限制类型、限制必要性、指定默认值):

            props:{

                name:{

                  type:String,//类型

                  required:true,//必要性

                  default:'老王'//默认值

                }

            }

备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会付出警告,若业务需求确

            实修改,那么请复制props的内容到data中一份,然后去修改data中的数据。

 mixin(混入)

    功能:可以把多个组件共用的配置取成一个混入对象

    使用方式:

        第一步定义混合,例如:

          {

              data(){...},

              methods:{....}

              ....

          }

        第二步使用混入,例如:

            (1)、全局混入:Vue.mixin(xxx)

               (2)、局部混入:mixins:['xxx']


## 插件

  功能:用于增强Vue

  本质:包含install方法的一个对象,install的第一个参数事Vue,第二个以后的参数是插件使用者传递的数据。

  定义插件:

      对象.install = function(Vue,options) {

          //1、添加全局过滤器

          Vue.filter(...)

          //2、添加全局指令

          Vue.directive(...)

          //3、配置全局混入(合)

          Vue.mixin(...)

          //4、添加实例方法

          Vue.prototype.$myMethod = function () {...}

          Vue.prototype.$myPrototype = xxx

      }

      使用插件:Vue.use()

第一步:

第二步:

在main.js入口文件中使用一下插件

Vue.use(plugins)

第三步:

在组件中直接使用

scoped样式

    作用:让样式在局部生效,防止冲突。

    写法:<style scoped>

上一篇下一篇

猜你喜欢

热点阅读