vue2 - ref属性与mixin属性

ref属性：

替代DOM原生操作中的id获取元素，ref还可以获取组件(VueComponent)

  <div id="app">
    <p ref="say">hello,world</p>
  </div>

<script>
  const vue=new Vue({
    el: '#app',
    methods: {
      getElement(){
        //获取ref为say的element
        console.log(this.$refs.say)
      }
    }
  })
</script>

 

---

 

mixin属性：

mixin混合就是把一些公共的属性与方法抽取出来，要使用时即可方便使用

定义公共的属性与方法 - mixin.js

export const mixinFn={
 //公共的方法
  methods: {
    info(){
      //定义的公共的方法
      console.log("我是mixin中的共享方法")
    }
  },
  //生命周期
  mounted() {
    //生命周期方法
  },
  beforeDestroy() {
    //生命周期方法
  }
}

export const mixinData={
  data(){
    return {
      //公共的属性
      name: 'levi',
      age: 18
    }
  }
}

 

在组件中使用：human.vue

导入mixin.js，在组件中定义mixins: [] 声明要使用的属性或者方法

注意：

1.如果组件中的data中的属性或方法与mixin中的data中的属性或方法有冲突，优先使用当前组件中的属性或方法

2.如果生命周期方法有冲突时，组件与mixin中的方法都会执行，mixin中的方法先执行 组件中的方法后执行

<template> </template>

<script>
  import {mixinFn,mixinData} from "./mixin";

  export default {
    data(){
      return{
        name: 'miakasa'
      }
    },
    //使用方式1
    mixins: [mixinFn,mixinData]
  }
</script>

<style> </style>

 

定义全局mixin：main.js

所有的组件都有mixin里面的属性与方法，一般不建议使用

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

//导入mixin
import {mixinFn,mixinData} from "./mixin";
//使用 所有的组件都有mixin里面的方法与属性
Vue.mixin(mixinFn)
Vue.mixin(mixinData)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')