Vue.js---ref、props、mixin配置项_js ref 参数-CSDN博客

本文链接：https://blog.csdn.net/weixin_52462962/article/details/123745977

ref 配置项：

在原生 js 中，我们往往需要获得 DOM 元素以进行操作，通常采用 document.queryseleter()等方式获取 DOM。但在 Vue 中，我们要避免直接操作 DOM ，所以引入了 ref 这一属性。

基本语法：

<h1 ref="title">Test</h1>

在 VueComponent 的实例化对象中有一个 $refs 属性，该属性储存了所有带有 ref 属性的 DOM。而组件内方法的 this 即为当前实例化对象，所以我们可以通过 this.$refs.xxx 来获取 ref 值为 xxx 的 DOM 节点（真实DOM），并调用其属性、方法。

props配置项：

在编写组件结构时，一般使用插值语法使用 data 中的属性

  <div>
      <h1>{{msg}}</h1>
      <h3>name:{{name}}</h3>
      <h3>sex:{{sex}}</h3>
      <h3>age:{{age}}</h3>
  </div>

但可能存在同一组件被多次实例化的情况，而它们的数据有可能不一样，此时就需要运用到props传递数据。

数据需要传递到其父组件的组件标签中，注意数据命名需要一一对应。

      <Student name="lisi" sex="female" age="19"/>
      <Student name="wangwu" sex="male" :age="20"/>

再在当前组件配置 props 配置项，有三种方式配置：

法一：
props:['name','sex','age']

法二：
props:{
    name:String,
    age:Number,
    sex:String
}

法三：
    props:{
        name:{
            type:String,
            required:true //必须传递该参数
        },
        age:{
            type:Number,
            default:99 //默认值
        },name:{
            type:String,
            required:true
        }
    }

方法1：简单接收，用一个数组储存需要接收参数的属性名。

方法2：接收同时对数据类型进行约束，若传入的数据不符合其约束值，则会报错，但不会自动进行类型转换！

方法3：每个属性名配置为一个对象，对象内含有多个属性。

type：传入参数的数据类型
required：是否必须传递该参数（不传递会报错）
default：该参数的默认值（不传递该参数时使用）

注意事项：

传递过来的参数原则上不允许修改，否则会报错（但修改会生效）。最好的解决方法是复制一份到 data 中，注意不要重复命名。data 中的数据可以修改。

mixin配置项：

在不同的组件中，常常会用到作用一样的方法/属性，而 mixin 配置项则可以实现对这些方法的复用，让多个组件使用同一个方法/属性。

首先需要在一个 js 文件中编写需要的方法、属性等。注意要 export 对象。

export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
    data: {

    }
}

在需要的组件下引入该 js 文件，并配置 mixins 属性。

import {mixin} from '../mixin'
export default {
    name:'School',
    data(){
        return {
            name:'baciii',
            address:'sztu'
        }
    },
    mixins:[mixin]
}

这样，引入了该 js 文件的组件就可以使用文件中的属性、方法等。

全局引入：

我们还可以在 main.js 文件中引入该 js 文件得到全局引入的效果，所有 Vue 实例，VueComponent 实例都可以使用该文件中的属性、方法。

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
import { mixin } from './mixin'
Vue.mixin(mixin)
new Vue({
    el: '#app',
    render: h => h(App)
})

注意事项：