[JavaScript知识库]Vue基础（ref props mixin）

ref 属性

它的作用是给DOM元素加上标签便于VUE来操作DOM元素。

<h1 ref="demo">test</h1>
// 获取对应的dom
let dom = this.$refs.demo;
console.log(dom);

如果我们给组件加上ref标签

 <School ref="sc"></School>

我们拿到的是组件的实例对象vc

props属性

 <Student sex="zs" age="18"></Student>

接收：

props: ["sex", "age"] // 这里的顺序无所谓

特别注意这样传入的值是一个字符串，如果我们想要传入数字则需要写为：

 <Student sex="zs" :age="18"></Student>

这样18会当做表达式进行解析，这样就是一个数字。
同事我们在使用的时候可以指定接收的类型

props: {
  sex: String,
  age: Number,
},

也可以写成对象的形式，添加更多限制

 props: {
   sex: {
     type: String,
     // 必须要传
     require: true,
   },
   age: {
     type: Number,
     // 可传可不传
     default: 0,
   },
 },

特别 注意：props里接收的数据不允许修改，如果我们要修改我们必须借助变量来修改

myAge:this.age

我们可以对myAge进行修改，达到改数据的目的。

mixin 混入

它的使用是将组件的公共部分提取出出来，从而代码更好的复用。

export const minx = {
    methods: {
        showName() {
            alert(1);
        }
    },
    data() {
        return {
            age: 19
        }
    },
    mounted() {
        console.log("生命周期函数！")
    },
}

import { minx } from "./index";
mixins: [minx],

全局混合：

Vue.mixin(minx)

凡是能够在vue里写的东西都可以在混入中写，如果我们混合的数据和自己有的数据发生冲突则用自己的数据。但是对于生命周期勾子来说，它保留自己的和混入的。

注代码案例来源于尚硅谷视频教学。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖