refs/props/mixin/scoped的使用

refs的使用

定义：ref是用来给元素或子组件注册引用信息，引用信息会注册在父组件的 $refs 对象上。

作用：在vue中一般很少会直接操作DOM，但偶尔会用到，这时可以通过【ref和$refs】两个来实现（减少获取dom节点的消耗）。

用法：使用this.$res.xxx 去调用

  <div>
     <h1 ref="title">{{info}}</h1>
	 <input type="text" ref="realname" value=""/>
	 <button @click="showdom" ref="btn">点我输出DOM元素</button>
  </div>

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

export default {
  name: 'app',
  data(){
	  return {
		  info:'学校信息',
	  }
  },
  methods: {
  	showdom() {
  		console.log(this.$refs.title);//输出真实dom元素
		console.log(this.$refs.btn);//输出真实dom元素
		console.log(this.$refs.realname.value);//输出input框的值
  	}
  },
  
}
</script>

props的使用

定义

用于父组件给子组件传递数据。传递用法：

 <School ref="sch" realname="张三" sex="男" :age="age"></School>

加:可引用表达式，否则就是字符串。

简单声明

props: ['realname','sex','age'],//第一种：简单声明

指定名称与类型

props: {
 	realname: String,
 	sex:String,
 	age:Number
}

类型+必填+默认值

props: {
			realname: {
				type: String,
				default: '无姓名',
				required:true
			},：用于父组件给子组件传递数据
sex: {
				type: String,
				default: '男'
		},
		age: {
				type: Number,
				required:true,
				default:30,
		}
},

mixin混合

定义

混入 (mixins) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

创建mixins文件

与src同级别：

export const hunhe1 = {
	methods: {
		show() {
			alert(this.name);
		}
	},
}
export const hunhe2 = {
	data(){
		return{
			x:100,
			y:200
		}
	}
}

 局部混入

在需要混入的组件中引入

import {hunhe1,hunhe2} from '../mixin.js';
mixins:[hunhe,hunhe2],

 全局混入

在main.js中混入

import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

scoped

定义

在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。

写法

Lang控制style语言，默认是css。

<style scoped lang="less">
	.demo{
		background: blue;
	}
</style>