目录
创建好mixin.js （和main.js在一个文件夹下即可）
ref属性
ref作用
1. 被用来给元素或者子组件注册引用信息（id的替代者）
2. 应用在html标签上通过$refs来获取真实DOM元素，应用在组件标签上获取的是组件实例对象
使用方法
在标签内设置ref="xxx"，xxx是用到的名字
然后用Vue.$refs.xxx 就可以获取所在标签的真实DOM
实例
<div>
<!-- v-text 向所在的节点中渲染文本内容,替换掉节点中原有的内容 -->
<h1 v-text="msg" ref="title"></h1>
<School ref="sch" />
<button @click="showDOM()">点我输出上方的DOM节点</button>
</div><script>
// 引入School组件
import School from './components/School.vue'
export default {
name:'App',
// 注册组件
components:{School},
data(){
return {
msg:'欢迎学习Vue'
}
},
methods:{
showDOM(){
console.log(this.$refs.title);//输出真实DOM标签
console.log(this.$refs.sch);//输出vc对象实例
}
}
}
</script>props配置项
props的作用：父组件向子组件传递数据时接收数据的配置项
props的使用方法
1. 第一步：先在父组件中创建要传递的数据（可以是data中的数据，也可以是methods中的函数）
2. 第二步：在template模板中使用子组件的标签中添加 要传递的数据（name="李四"，sex="女"，age="18")
3. 第三步：在子组件中的实例中使用props属性接收传递过来的数据和data同级别
代码示例
父组件代码传递数据
<template>
<!-- 使用组件 -->
<div>
<!-- 传数据 冒号表示v-bind 会当成js表达式解析 所以传递过去的就是数字18而不是字符18 -->
<Student name="李四" sex="女" :age="18">
</Student>
</div>
</template>
<script>
// 引入School组件
import Student from './components/Student.vue'
export default {
name:'App',
// 注册组件
components:{ Student, },
}
</script>子组件代码接收数据的三种方式
props接收数据有三种方式：
第一种普通接收，写成数组形式
<template>
<div>
<h1>{{msg}}</h1>
<h3>学生名字{{name}}</h3>
<h3>学生性别{{sex}}</h3>
<h3>学生年龄{{myAge}}</h3>
<button @click="updateAge">点击</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return{
msg:'我是尚硅谷的学生',
// 再添加一个属性，然后把传递过来的age值接收一下，看看是不是数字18
myAge:this.age
}
},
// Vue规定是不可以直接修改传递过来的数据的
// 简单声明接收数据props
props:['name','sex','age'],
methods:{
// 避免直接修改传入的属性值
updateAge(){
this.myAge++
}
}
}
</script>第二种限制数据类型接收
写成对向形式
// 接收的同时对数据进行类型限制
props:{
//数据名: 数据类型
name:String,
age:Number,
sex:String
}第三种限制类型+默认值指令+必要性指令（用的较少，但是功能很齐全）
写成对象作为数组元素的形式
//接收数据时对数据进行类型限制+默认值的指令+必要性的指令
props:{
name:{
type:String,//name的类型是字符串
required:true//name是必须要传的
},
age:{
type:Number,
default:18,//没有传递值，默认18
},
sex:{
type:String,
required:true
}
},再次强调！！！
props是只读的,Vue底层会监视你对props的修改,不能直接进行修改传来的数据。
若有修改需要,可以在data中添加一个属性接收传递过来的数据,然后修改data中的数据。
mixin配置项（混入也叫混合）
mixin的作用：
可以把多个组件中共用的数据或者配置项提取出来，提高代码的复用率。
mixin的使用方法：
1.定义：mixin文件是一个js文件，里面有很多个带有命名的实例。
2.引入：mixin在需要用到的地方引入import {xxx} from '路径'。
3.使用：在实例对象中添加一个mixins配置项 如mixin : [ xxx ] 必须写成数组形式！
例
创建好mixin.js （和main.js在一个文件夹下即可）
// 这个用于局部
export const mixin1 = {
methods: {
showName() {
alert(this.name)
}
},
}
// 这个用于全局引用
export const mixin2 = {
data() {
return {
x: 1,
y: 2
}
}
}局部引入mixin代码示例
在子组件中局部引入 只能在这个组件中使用
<template>
<div>
<h3 @click="showName()">学校名字{{name}}</h3>
<h3>学生性别{{address}}</h3>
</div>
</template>
<script>
// 引入一个混合 用的是大括号 mixin1是main.js文件中的命名
import {mixin1} from '../mixin.js'
export default {
name:'School',
data(){
return{
name:'atguigu',
address:'北京'
}
},
mixin:[mixin1],
}
</script>全局引入mixin（不推荐使用）
这个是在main.js中引入使用的，注意的是全局使用用的是Vue.mixin（xxx）而不是在实例对象中！！！
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App'
// 引入全局混合mixin
import { mixin2 } from './mixin'
// 使用全局混合
Vue.mixin(mixin2)
// 关闭生产提示
Vue.config.productionTip = false
// 创建vm
new Vue({
// 指定容器
el: '#app',
// 解析App模板
render: h => h(App)
})mixin注意事项
(1)混合中data属性没有组件中使用的data属性级别高,如果组件data中有相同的属性值,则用组件内自带的
(2)混合中的methods配置项中的函数会和组件中的methods并在一起两个methods的函数都会执行,但是会优先执行混合里的函数
plugins插件配置项
功能：用于增强Vue
plugins本质：
包含install方法的一个对象,install的第一个参数是Vue,第二个参数是插件使用者传递参数的数据。
使用方法
和mixin相似，需要创建一个plugins.js 里面可以放之前写的过滤器，自定义指令，混入，往原型对象中添加方法也可以放在这里面
在main.js中使用都是全局配置！
//引入
import plugins from './plugins'
// 使用插件
Vue.use(plugins)
scoped属性
scoped 作用：
在所有组件中，最后style样式会整合在一起，那面会出现标签类名相同的情况，在组件的style标签中加上这个属性，就可以确保这个style中的类名只在这对这个组件中的标签生效，不会对其他组件中相同类名的标签生效
其他组件中也可使用demo作为类名，但是不会受这个影响
<style scoped> .demo{ background-color: skyblue; } </style>
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
