脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 属性

Vue中的 ref,props,mixin属性

 更新时间：2022年05月27日 08:49:41   作者：​ 奔跑吧鸡翅   ​  
这篇文章主要介绍了Vue中的ref,props,mixin属性,文章围绕主题ref,props,mixin展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

ref

ref 属性:

  • 1.被用来给元素或子组件注册引用信息（(id的替代者)
  • 2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
  • 3.使用方式: 打标识: <h1 ref="xxx">....</h1>或<School ref="xxx"></School> 获取: 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

<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "三里屯小学",
      address: "北京"
    }
  }
}
</script>

<style scoped>
.school {
  background-color: aliceblue;
}
</style>

App.vue

<template>
  <div>
    <h2 ref="title">欢迎学习Vue</h2>
    <button @click="showDom" ref="btn">点我输出上方dom</button>
    <School ref="sch"/>
  </div>
</template>

<script>
//引入School组件
import School from "@/components/School";

export default {
  name: "App",
  components: {
    School
  },
  methods:{
    showDom(){
      console.log(this.$refs);
      console.log(this.$refs.title);//真实Dom元素
      console.log(this.$refs.sch);//School组件的实例对象
    }
  }
}
</script>

<style scoped>
</style>

props

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

  • (1).传递数据： <Demo name="xxx" /> 
  • (2).接收数据：

第一种方式（只接收）：

props: [ 'name']

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

props:{
	name : Number
}

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

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

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

使用介绍 Student.vue

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg:"学生信息",
    }
  },
  //简单声明接受
  props:["name", "sex", "age"]
}
</script>

<style scoped>
</style>

App.vue

<template>
  <div>
    <Student name="张三" sex="男" :age="18+1"/>
    <Student name="王老五" sex="男" age="19"/>
  </div>
</template>

<script>
//引入School组件
import Student from "@/components/Student";

export default {
  name: "App",
  components: {
    Student
  }
}
</script>
<style scoped>
</style>

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

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

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

<Student name="张三" sex="男" :age="18"/>

或者写的更具体

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

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

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ myAge }}</h2>
    <button @click="updateAge">点我修改传进来的年龄</button>
  </div>
</template>
<script>
export default {
  name: "Student",
  props: ["name", "sex", "age"],
  data() {
    return {
      msg: "学生信息",
      myAge: this.age
    }
  },
  methods: {
    updateAge() {
      console.log(this.myAge++);
    }
  }
}
</script>
<style scoped>
</style>

$attrs

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

<template>
  <div>
    <Demo msg="hello"/>
  </div>
</template>
<script>
import Demo from './components/Demo'
export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>

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

<template>
  <div>
    {{ msg }}
  </div>
</template>
<script>
export default {
  name: "Demo",
  props: ["msg"],
  mounted() {
    console.log(this);
  }
}
</script>

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

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

<template>
  <div>
    {{ $attrs.msg }}
  </div>
</template>
<script>
export default {
  name: "Demo",

  mounted() {
    console.log(this);
  }
}
</script>

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

mixin

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

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

第二步、使用混入

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

Student.vue

<template>
  <div>
    <h2 @click="alertName">学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>{{ x }}</h2>
    <h2>{{ y }}</h2>
  </div>
</template>
<script>
//引入混合
import {mixin,mixin2} from "@/mixin";
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
      x:300
    }
  },
  mounted() {
    console.log("hello mounted");
  },
  mixins: [mixin,mixin2]
}
</script>
<style scoped>
</style>

School.vue

<template>
  <div>
    <h2 @click="alertName">学校名称：{{ name }}</h2>
    <h2>学生地址：{{ address }}</h2>
  </div>
</template>
<script>
import {mixin} from "@/mixin";
export default {
  name: "School",
  data() {
    return {
      name: "三里屯大学",
      address: "北京"
    }
  },
  mixins: [mixin]
}
</script>
<style scoped>
</style>

App.vue

<template>
  <div>
    <Student/>
    <hr/>
    <School/>
  </div>
</template>
<script>
//引入School组件
import Student from "@/components/Student";
import School from "@/components/School";
export default {
  name: "App",
  components: {
    Student,
    School
  }
}
</script>
<style scoped>
</style>

新建 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 属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue-music关于Player播放器组件详解

    vue-music关于Player播放器组件详解

    这篇文章主要为大家详细介绍了vue-music关于Player播放器组件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 使用Bootrap和Vue实现仿百度搜索功能

    使用Bootrap和Vue实现仿百度搜索功能

    这篇文章主要介绍了使用Bootrap和Vue实现仿百度搜索功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-10-10
  • vue实现动态显示与隐藏底部导航的方法分析

    vue实现动态显示与隐藏底部导航的方法分析

    这篇文章主要介绍了vue实现动态显示与隐藏底部导航的方法,结合实例形式分析了vue.js针对导航隐藏与显示的路由配置、事件监听等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 使用props传值时无法在mounted处理的解决方案

    使用props传值时无法在mounted处理的解决方案

    这篇文章主要介绍了使用props传值时无法在mounted处理的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Avue 组件库的使用初体验

    Avue 组件库的使用初体验

    这篇文章主要为大家介绍了Avue 组件库的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • Vue Router路由守卫超详细介绍

    Vue Router路由守卫超详细介绍

    路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧
    2023-01-01
  • 详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

    详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

    这篇文章主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue中组件之间相互传值的6种方法小结

    vue中组件之间相互传值的6种方法小结

    Vue.js 中组件间通信的方法有很多种,这篇文章主要为大家详细介绍了6种常见的直接或间接的组件传值方式,有需要的小伙伴可以参考一下
    2024-01-01
  • 详解Vue.js iview实现树形权限表（可扩展表）

    详解Vue.js iview实现树形权限表（可扩展表）

    这篇文章主要介绍了详解Vue.js iview实现树形权限表（可扩展表），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解如何使用webpack在vue项目中写jsx语法

    详解如何使用webpack在vue项目中写jsx语法

    本篇文章主要介绍了详解如何使用webpack在vue项目中写jsx语法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论