Vue中的ref、props、mixin

李先来2分钟
375 阅读2分钟

ref 属性/props/mixin混入

ref 有什么作用

  1. 被用来给元素或子组件注册引用信息（id 的替代者）
  2. 放入组件标签中，可以获取组件实例对象
  3. 放入 html 标签中，可以获取 DOM 节点

Image.png

怎么使用 ref

  • 打标识

    • image.png

  • 获取

    • $refs在组件实例对象上
    • 使用this.$refs得到对象
    • 如果要得到具体的 ref 需要使用this.$refs.具体的ref
    • Image.png

用id和ref有什么区别？

  • 如果对组件标签使用id，然后用 DOM 方法得到它，那么得到的就是DOM结构

    • Image.png

  • 如果用的是ref，那么得到的是VueComponent（也就是组件实例对象）

    • Image.png

用 ref 得到实例对象有什么作用？

  • 可以用于组件通信（待深入）

props

为什么需要props

  • 要让其他人也用相同的组件，但是数据不一样
  • 实现了数据的不同展示
  • 都能够分别增加、修改自己的内容image.png

怎么使用props

  • 首先得在组件标签中写相应数据（高一层级的组件）

    • image.png

  • 然后得跟组件说一声要用外部的数据（低一层级的组件。注意要用字符串）

    • image.png

  • 最后是在template中使用通过props获取的外部数据

Image.png

props有哪三种方式？

  • 简单声明接受

    • image.png

  • 指定类型接受

    • image.png

    • 如果数据不对，会进行相应的提示

      • image.png

  • 完整类型

    • image.png

如果传输的参数是18，但要展示的偏要是19，怎么做到呢？

  • 用v-bind将字符串中的内容变成表达式

    • :是v-bind的缩写

image.png

怎么判断数据是data还是props呢？

  • 直接在开发者工具上看

image.png

props和data上的数据，谁的优先级更高呢？

  • props上的内容是优先被接收的

如果传入的prop是一定要被修改，怎样操作呢？

  • 实际上还是无法修改

  • 只能让data中的某个属性等于props中的数据

    • 因为props的读取优先级比data要高

  • 比如年龄一定要修改

    • 先让myAge = this.age（之所以这么做，是因为props的优先级比data高，先读取这里）
    • 然后页面上实际展示的就是myAgeimage.png

mixin混入

什么叫混入

  • 把相同的内容共同引入

  • 两个组件共享一个配置

  • 比如下图的showName方法就重复了

    • image.png

mixin.js写在哪个位置？

  • 写在main.js的同层的地方

mixin.js要写什么内容？

  • 想要共用的方法
  • 然后export暴露出去
  • 在对象的组件里面再引入
  • 然后再mixins里面用数组引用
avatar
文章
阅读
粉丝