vue中混入（Mixins）+操作dom（ref與$refs）+一點對組件暴露的理解。

混入（Mixins）

mixins是什麼？是vue中組件開發的過程中功能複用的一種方式

在頁面風格不相同的時候，但是執行的方法和所需要的數據類似的時候，那麼就可以使用混入吧這項公共相同的部分提取出來 進行封裝 減少代碼量 提升修改和測試難度

編寫：

就是把組件和方法提取出來集中存儲在混入中

1.在項目的src文件夾下創建一個文件夾MIxins—>index.js

var myMixins={
    data(){
        return {
            // 重用的變量
            text:"哈哈哈"
        }
    },
    methods:{
        // 重用的方法
        fun(){
            console.log("我是多個組件中相同的方法")
        }
    }
}
export default myMixins

2.使用封裝好的重用內容

​ (1)引用模塊到頁面中

// 引用混入
import Mixins from "@/Mixins/index"

​ (2)在文件中設置關聯

//引用混入
import Mixins from "@/Mixins/index"
export default {
     // 設置關聯
    // mixins:[Mixins],
     data(){
        return {
           
        }
    },
}

​ (3)使用 正向和vue中使用變量和方法一樣想咋用咋用

全局混入

全局混入 就是在任何組件中都可以使用

使用:

1.在main.js中引用混入

2.在main.js使用

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 引用混入
import Mixins from "@/Mixins/index"
Vue.mixin(Mixins)

import axios from "axios"
Vue.prototype.axios=axios
new Vue({
  render: h => h(App),
}).$mount('#app')

3.在任何組件中使用 就直接調用就好

如果組件中有同名的變量或者方法,就會使用組件中的變量或者方法.

****因爲,你如果要使用他的數據,你就沒必要再定義一個了,定義就是不想用了****

在vue中如何操縱dom元素

ref

是什麼

在vue中很少進行直接的dom操作,但是如果有極端的情況需要我們進行dom操作的話,在這個時候就可以使用ref來進行dom操作

ref:用來給元素或者是子組件組測引用名/引用信息,引用的信息會註冊在父組件的$refs對象上,如果綁定在普通dom上 引用的是指向dom元素如果綁定在子組件上 引用的指向是組件實例

$refs 是一個對象 ,它裏面含有的就是綁定ref屬性的元素或者是組件信息

綁定子dom元素上–可以獲取dom信息對象

使用:

1.綁定 通過ref對dom元素進行綁定

<template>
    <div>
        <input type="text" ref="con"/>
        <button @click="fun()">點我得到text的值</button>
        <button @click="funb()">點我修改上面文字的顏色</button>
    </div>
</template>

2.獲取this.$refs.xxx

export default {
    data(){
        return {
            aaa:"xxxxxx"
        }
    },
    methods:{
        fun(){
         
            console.log(this.$refs.con.value)
        },funb(){
            this.$refs.text.style.color="red";
        }
    }
}

數據請求地址封裝

1.創建一個文件夾api—index.js

// http://localhsot:3000/xxx/xxx
var location="http://localhost:3001"
export var api={
    home:location+"/user/home",
    phone:location+"/user/phone",
    all:location+"/user/all",
}

2.使用

<script>
import {api} from "@/api/index.js"
export default {
    data(){
        return {
        }
    },
    mounted() {
     this.axios({
        //  url:"http://localhost:3000/user/home",
         url:api.home,
         method:"get"
     }).then((ok)=>{
         console.log(ok)
     })   
    }
}
</script>

最後說一下import引用啥時候用大括號的問題

看上面的api暴露的時候是直接export var api 然後引用的時候

import {api} from "@/api/index.js"就需要大括號

而export default 暴露就不用.

一個組件中 export 可以暴露多個變量

但是export default只能有一個

所以大括號中就是export的變量名.因爲有多個所以說要用變量名區分

上面的意思就是 import 引用了from後面路徑文件中的某個屬性,大括號中就是屬性名