Vue中的 ref,props,mixin属性

目录

• ref
• props
• $attrs
• mixin

ref

ref 属性:

• 1.被用来给元素或子组件注册引用信息（(id的替代者)
• 2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
• 3.使用方式: 打标识: 

  ....

  或 获取: this.$refs.xxx

为了说明这个属性，我们重新写下相关代码：

main.js

//引入Vue
import Vue from 'vue';
//引入App
import App from './App';
//关闭vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
    el: "#app",
    render: h => h(App)
})

School.vue

App.vue

props

功能：让组件接收外部传过来的数据

• (1).传递数据：  
• (2).接收数据：

第一种方式（只接收）：

props: [ 'name']

第二种方式（限制类型)：

props:{
	name : Number
}

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

props:{
	name:{
		type:String,//类型
		required:true,//必要性
		default:'老王'//默认值
	}
}

备注：props是只读的，Vue 底层会监测你对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制 props 的内容到 data 中一份，然后去修改 data 中的数据

使用介绍 Student.vue

App.vue

在接受时，还可以进行类型限制

 //接受的同时进行类型限制
  props:{
    name:String,
    age:Number,
    sex:String
  }

这样在使用的时候，年龄只能传数值类型

或者写的更具体

//接收的同时对数据：类型限制+默认值指定+必要性限制
  props: {
    name: {
      type: String,//类型String
      required: true//必须传值
    },
    age: {
      type: Number,
      default: 99//默认99
    },
    sex: {
      type: String,
      required: true
    }

注意：传过来的值不能改变，如需改变，需要本地定义一个值

$attrs

App.vue 中引入并使用 Demo 组件，并向其传入一个 msg，值为 “hello ”

Demo 组件在 props 中接收，我们在 mounted 生命钩子中打印下 this

可以看到 vc 身上的 props 有刚才传过来的值 

如果 Demo 中不使用 props 接收，也可以使用

可以看到 vc 的 $attrs 上有刚才传过来的 msg，所以也可以使用 $attrs.msg使用传过来的值

mixin

功能：可以把多个组件共用的配置提取成一个混入对象 使用方式： 第一步、定义混合

{
	data(){....},
	methods:{....}
}

第二步、使用混入

• (1).全局混入：Vue.mixin(xxx)
• (2).局部混入：mixins: [ "xxx "]

Student.vue

School.vue

App.vue

新建 mixin.js

export const mixin = {
    methods: {
        alertName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log("你好，mounted");
    }
}

export const mixin2 = {
    data() {
        return {
            x: 100,
            y: 200
        }
    }
}

以上是局部引入mixin，下面介绍全局引入 mixin，修改 main.js

//引入Vue
import Vue from 'vue';
//引入App
import App from './App';
import {mixin,mixin2} from "@/mixin";
//关闭vue的生产提示
Vue.config.productionTip = false
Vue.mixin(mixin)
Vue.mixin(mixin2)
//创建vm
new Vue({
    el: "#app",
    render: h => h(App)
})

到此这篇关于Vue中的 ref,props,mixin属性的文章就介绍到这了,更多相关Vue 属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！