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
//創(chuàng)建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

功能：讓組件接收外部傳過來的數(shù)據(jù)

(1).傳遞數(shù)據(jù)： <Demo name="xxx" />
(2).接收數(shù)據(jù)：

第一種方式（只接收）：

props: [ 'name']

第二種方式（限制類型)：

props:{
	name : Number
}

第三種方式(限制類型、限制必要性、指定默認值)：

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

備注：props是只讀的，Vue 底層會監(jiān)測你對 props 的修改，如果進行了修改，就會發(fā)出警告，若業(yè)務需求確實需要修改，那么請復制 props 的內容到 data 中一份，然后去修改 data 中的數(shù)據(jù)

使用介紹 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
  }

這樣在使用的時候，年齡只能傳數(shù)值類型

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

或者寫的更具體

//接收的同時對數(shù)據(jù)：類型限制+默認值指定+必要性限制
  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)
//創(chuàng)建vm
new Vue({
    el: "#app",
    render: h => h(App)
})

到此這篇關于Vue中的 ref,props,mixin屬性的文章就介紹到這了,更多相關Vue 屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue-music關于Player播放器組件詳解
這篇文章主要為大家詳細介紹了vue-music關于Player播放器組件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
使用Bootrap和Vue實現(xiàn)仿百度搜索功能
這篇文章主要介紹了使用Bootrap和Vue實現(xiàn)仿百度搜索功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-10-10
vue實現(xiàn)動態(tài)顯示與隱藏底部導航的方法分析
這篇文章主要介紹了vue實現(xiàn)動態(tài)顯示與隱藏底部導航的方法,結合實例形式分析了vue.js針對導航隱藏與顯示的路由配置、事件監(jiān)聽等相關操作技巧,需要的朋友可以參考下
2019-02-02
使用props傳值時無法在mounted處理的解決方案
這篇文章主要介紹了使用props傳值時無法在mounted處理的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Avue?組件庫的使用初體驗
這篇文章主要為大家介紹了Avue?組件庫的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Vue Router路由守衛(wèi)超詳細介紹
路由守衛(wèi)，簡單理解來說就是，當用戶要進行一些操作時，我需要用戶的一些信息或數(shù)據(jù)或行為，我判斷過后，才會同意用戶進行操作，說到這里，我想大家心里都或多或少有點理解了吧
2023-01-01
詳解vue中使用axios對同一個接口連續(xù)請求導致返回數(shù)據(jù)混亂的問題
這篇文章主要介紹了詳解vue中使用axios對同一個接口連續(xù)請求導致返回數(shù)據(jù)混亂的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
vue中組件之間相互傳值的6種方法小結
Vue.js?中組件間通信的方法有很多種,這篇文章主要為大家詳細介紹了6種常見的直接或間接的組件傳值方式,有需要的小伙伴可以參考一下
2024-01-01
詳解Vue.js iview實現(xiàn)樹形權限表（可擴展表）
這篇文章主要介紹了詳解Vue.js iview實現(xiàn)樹形權限表（可擴展表），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
詳解如何使用webpack在vue項目中寫jsx語法
本篇文章主要介紹了詳解如何使用webpack在vue項目中寫jsx語法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11