3.2. ref 属性
ref被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象vc
- 使用方式
- 打标识：或
- 获取：this.$refs.xxx
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
<School ref="sch"/>
<Student/>
</div>
</template>
<script>
// 引入组件
import School from './components/School.vue';
import Student from './components/Student.vue';
export default {
name:'App',
components:{
School,
Student
},
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>
输出如下所示：
3.3. 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:'老王' //默认值 } }
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据
src/App.vue
<template>
<div>
<Student name="李四" sex="女" :age="18"/>
<Student name="王五" sex="男" :age="18"/>
</div>
</template>
<script>
// 引入组件
import Student from './components/Student.vue';
export default {
name:'App',
components:{
Student
}
}
</script>
src/components/Student.vue
<template>
<div>
<h1>{{ msg }}</h1>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>学生年龄：{{myAge + 1}}</h2>
<button @click="updateAge">尝试修改收到的年龄</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
msg: "我是一个莆田学院的学生",
myAge: this.age
}
},
methods: {
updateAge() {
this.myAge++;
}
},
// 简单声明接收
// props:['name','age','sex']
// 接收的同时对数据进行类型限制
// props: {
// name: String,
// age: Number,
// sex: String
// }
// 接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
props: {
name: {
type: String, // name的类型是字符串
required: true // name是必要的
},
age: {
type: Number,
default: 99, // 默认值
},
sex: {
type: String,
required: true
}
}
}
</script>
输出如下所示：
3.4. mixin 混入
- 功能：可以把多个组件共用的配置提取成一个混入对象
- 使用方式
- 定义混入
const mixin = { data() {....}, methods: {....} .... } - 使用混入
- 全局混入Vue.mixin(xxx)
- 局部混入mixins:[‘xxx’]
- 定义混入
备注
- 组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先
- 同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用
src/mixin.js
export const hunhe = {
methods: {
showName() {
alert(this.name);
}
},
mounted() {
console.log('你好啊！');
}
}
export const hunhe2 = {
data() {
return {
x:100,
y:200
}
}
}
src/components/School.vue
<template>
<div>
<h2 @click="showName">学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
// 引入一个hunhe
import {hunhe,hunhe2} from '../mixin';
export default {
name:'School',
data() {
return {
name: "莆田学院",
address: '北京'
}
},
mixins:[hunhe,hunhe2] // 局部混入
}
</script>
src/components/Student.vue
<template>
<div>
<h2 @click="showName">学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
</div>
</template>
<script>
import {hunhe,hunhe2} from '../mixin';
export default {
name:'Student',
data() {
return {
name: "liqb",
sex: '男'
}
},
mixins:[hunhe,hunhe2] // 局部混入
}
</script>
src/App.vue
<template>
<div>
<School/>
<hr/>
<Student/>
</div>
</template>
<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
name:'App',
components:{
Student,
School
}
}
</script>
src/main.js
import Vue from 'vue';
import App from './App.vue';
// import {mixin} from './mixin'
Vue.config.productionTip = false;
// Vue.mixin(hunhe) // 全局混合引入
// Vue.mixin(hunhe2) // 全局混合
new Vue({
el: '#app',
render: h => h(App),
})
输出如下所示：
3.5. plugin 插件
- 功能：用于增强Vue
- 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
- 定义插件（见下 src/plugin.js）
- 使用插件：Vue.use()
src/plugin.js
export default {
install(Vue,x,y,z){
console.log(x,y,z);
// 全局过滤器
Vue.filter('mySlice', function(value) {
return value.slice(0,3);
});
// 定义全局指令
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('你好啊');
}
}
}
src/main.js
import Vue from 'vue';
import App from './App.vue';
import plugins from './plugins'; // 引入插件
Vue.config.productionTip = false;
Vue.use(plugins,1,2,3); // 应用（使用）插件
new Vue({
el: '#app',
render: h => h(App),
})
src/components/School.vue
<template>
<div>
<h2>学校地址：{{address}}</h2>
<h2>学校名称：{{name}}</h2>
<button @click="test">点我测试一个hello方法</button>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name: "莆田学院",
address: '福建莆田'
}
},
methods: {
test(){
this.hello();
}
}
}
</script>
src/components/Student.vue
<template>
<div>
<h2>学生姓名：{{ name | mySlice}}</h2>
<h2>学生性别：{{ sex }}</h2>
<input type="text" v-fbind:value="name">
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name: "liqb",
sex: '男'
}
}
}
</script>
输出如下所示：
3.6. scoped样式
- 作用：让样式在局部生效，防止冲突
- 写法：<style scoped>
Vue中的webpack并没有安装最新版，导致有些插件也不能默认安装最新版，如 npm i less-loader@7，而不是最新版
src/components/School.vue
src/components/Student.vue<template>
<div class="demo">
<h2 class="title">学校地址：{{address}}</h2>
<h2>学校名称：{{name}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name: "莆田学院",
address: '福建莆田'
}
}
}
</script>
<style scoped>
.demo{
background-color: skyblue;
}
</style>
src/components/Student.vue
<template>
<div class="demo">
<h2 class="title">学生姓名：{{ name }}</h2>
<h2 class="atguigu">学生性别：{{ sex }}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name: "liqb",
sex: '男'
}
}
}
</script>
<style lang="less" scoped>
.demo {
background-color: pink;
.atguigu {
font-size: 40px;
}
}
</style>
src/App.vue
<template>
<div>
<h1 class="title">你好啊</h1>
<School/>
<Student/>
</div>
</template>
<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
name:'App',
components:{
Student,
School
}
}
</script>
<style scoped>
.title {
color: red;
}
</style>
输出如下所示：
