【关于Vue CLI ref props mixin plugin scoped】

ref 属性

ref被用来给元素或子组件注册引用信息（id的替代者）
●
应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象vc
●
使用方式 
a
打标识：<h1 ref="xxx"></h1>或<School ref="xxx"></School>
b
获取：this.$refs.xxx

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch"/>
  </div>
</template>

<script>
  import School from './components/School'

  export default {
    name:'App',
    components:{ School },
    data() {
      return {
        msg:'欢迎学习Vue！'
      }
    },
    methods: {
      showDOM(){
        console.log(this.$refs.title)	// 真实DOM元素
        console.log(this.$refs.btn)		// 真实DOM元素
        console.log(this.$refs.sch)		// School组件的实例对象（vc）
      }
    },
  }
</script>

props 配置项

props让组件接收外部传过来的数据 
●
传递数据<Demo name="xxx" :age="18"/>这里age前加:，通过v-bind使得里面的18是数字
●
接收数据
 第一种方式（只接收）props:['name', 'age'] 
 第二种方式（限制类型）props:{name:String, age:Number}
 第三种方式（限制类型、限制必要性、指定默认值）

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

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

mixin 混入

 功能：可以把多个组件共用的配置提取成一个混入对象 

 使用方式：
 定义混入

const mixin = {
    data() {....},
    methods: {....}
    ....
}

使用混入
1
全局混入Vue.mixin(xxx)
2
局部混入mixins:['xxx']

备注
1
组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先

var mixin = {
	data: function () {
		return {
    		message: 'hello',
            foo: 'abc'
    	}
  	}
}

new Vue({
  	mixins: [mixin],
  	data () {
    	return {
      		message: 'goodbye',
            	bar: 'def'
    	}
    },
  	created () {
    	console.log(this.$data)
    	// => { message: "goodbye", foo: "abc", bar: "def" }
  	}
})

同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

var mixin = {
  	created () {
    	console.log('混入对象的钩子被调用')
  	}
}

new Vue({
  	mixins: [mixin],
  	created () {
    	console.log('组件钩子被调用')
  	}
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

plugin 插件
 

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
3：定义插件（见下 src/plugin.js）
4：
使用插件：Vue.use()

export default {
  install(Vue,x,y,z){
    console.log(x,y,z)
    //全局过滤器
    Vue.filter('mySlice', function(value){return value.slice(0,4)})

    //定义全局指令
    Vue.directive('fbind',{
      //指令与元素成功绑定时（一上来）
      bind(element,binding){element.value = binding.value},
      //指令所在元素被插入页面时
      inserted(element,binding){element.focus()},
      //指令所在的模板被重新解析时
      update(element,binding){element.value = binding.value}
    })

    //定义混入
    Vue.mixin({
      data() {return {x:100,y:200}},
    })

    //给Vue原型上添加一个方法（vm和vc就都能用了）
    Vue.prototype.hello = ()=>{alert('你好啊')}
  }
}

scoped样式

作用：让样式在局部生效，防止冲突
2：
写法：<style scoped>
Vue中的webpack并没有安装最新版，导致有些插件也不能默认安装最新版，如 npm i less-loader@7，而不是最新版