Vue中的ref props mixin plugin scoped的使用方法

一.ref的属性

ref属性：
    1.被用来给元素或子组件注册引用信息（id的代替者）
    2.应用在HTML标签上获取的是真实dom元素，应用在组件标签上是组件实例对象（vc）
    3.使用方法：
        打标识：<h1  ref="xxxx></h1>或<school ref="xxx"></school>
        获取：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
	功能：让组件接收外部传入过来的数据
（1）传递数据:
	<demo name='xxx'>
(2)
	接收数据：
		第一种方式（只接受）
		props['name']
		
		第二种方式（限制类型）
		props:{
			name:String
		}
		第三种方式：（限制类型，限制必要性，指定默认值）
		props:{
			name:{
				type:String,//类型
				required:true//必要性
				default:'张三'//默认值
			}
		}

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

 上代码：

<template>
    <div>
        <student name="tom" :age=18 sex="male"></student>
        <student name="erika" :age=19 sex="female"></student>
    </div>
</template>

<script>
    // 引入组件
    import school from './components/school.vue'
    import student from './components/student.vue'
    export default {
        name:'app',
        data() {
            return {
                
            }
        },
        components:{
            school,
            student
        },
    }
</script>

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{myAge+1}}</h2>
        <button @click="updateAge">尝试修改收到的年龄</button>
        <h2>性别：{{sex}}</h2>
    </div>
</template>

<script>
        export default {
            data(){
                return{
                    msg:'我是一个学生',
                    myAge:this.age
            }
            },
            // 简单声明接收
            // 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
                }
            },
            methods:{
                updateAge() {
                    this.myAge++
                },
            }
        }
</script>

 

 三.mixin混入

mixin(混入)
    功能：可以把多个组件共有的配置提取成一个混入对象
    使用方法：
        第一步：定义混入，例如
        {
        data(){.....},
        method(){.....}
        }
        第二步：使用混入，例如：
        （1）全局混入：Vue.mixin(xxx)
        (2) 局部混入：mixins:[xxx]

    备注：使用混入加入数据时，原有的数据不会改变
 

例如：

//main.js文件
import Vue from 'vue'
import App from './app.vue'
import {hunhe2,mixin} from './components/mixin'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 全局混合
Vue.mixin(hunhe2)
Vue.mixin(mixin)
new Vue({
  render: h => h(App),
  // template:{App}
}).$mount('#app')

//混合函数mixin.js
export const mixin = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
}
export const hunhe2={
        data() {
            return {
                x:100,
                y:200
            }
        },
    }

//student.vue组件
<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2 @click="showName">学生姓名：{{name}}</h2>
        <h2>性别：{{sex}}</h2>
    </div>
</template>

<script>
// 局部混合
// import { mixin,hunhe2} from './mixin'
        export default {
            data(){
                return{
                    name:'张三',
                    sex:'male',
                    x:666
            }
            },
            // mixins:[mixin,hunhe2]
        }
</script>

//school.vue组件
<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2 @click="showName">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    // 局部混合
    // import {mixin,hunhe2} from './mixin'
        export default {
            data(){
                return{
                    name:'尚硅谷',
                    address:'上海',
            }
            },
            // mixins:[mixin,hunhe2]
        }
</script>

<style>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>

 四.plugin 插件

插件
	功能：用于增强Vue
	本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的值
	定义插件：
		对象.install=function(Vue,options){
		//1.添加全局过滤器
		Vue.filter(......)
		//2.添加全局指令
		Vue.directive(.....)
		//3.配置全局混入
		Vue.mixin(....)
		//4.添加实例方法
		Vue.prototype.$mymethod=function(){...}
		Vue.prototype.$myProperty=xxxx
		}
	使用插件：Vue.use(插件文件名)

 案例：

//定义插件
import Vue from "vue"

export default {
    install(){
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        }),
        Vue.filter({
            data() {
                    return{
                        x:100,
                        y:200
                    }
            }
        })
}
}

//注册插件
import Vue from 'vue'
import App from './app.vue'
import plugins from './plugins'
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 使用插件
Vue.use(plugins)
new Vue({
  render: h => h(App),
  // template:{App}
}).$mount('#app')

//使用插件
<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2 >学校名称：{{name|mySlice}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
        export default {
            data(){
                return{
                    name:'尚硅谷atgui',
                    address:'上海',
            }
            },
        }
</script>

<style>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>

五.scoped样式

作用：让样式在局部生效，防止冲突
写法：<style scoped>

//src/components/School.vue
<template>
  <div class="demo">
    <h2 class="title">学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
  export default {
    name:'School',
    data() {
      return {
        name:'尚硅谷atguigu',
        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: '张三',
        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'
  import School from './components/School'

  export default {
    name: 'App',
    components: { School, Student }
  }
</script>

<style scoped>
  .title {
    color: red;
  }
</style>