Vue单文件组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zimingyo/article/details/126967045

Vue单文件组件

结构
ref属性
组件data中组件的复用（prop）
mixin(混入)
插件
scoped

结构

项目结构
在这里插入图片描述
项目简析：
(1) 2，3中.vue文件的结构

<template></template>   //模板（HTML）
<script></script>       //组件  
<style></style>         //css样式，less

School.vue文件

<template>
    <div>
        <h2>{{scname}}</h2>
        <h2>{{address}}</h2> 
    </div>    
</template>

<script>
    export default{
        name:'School',
        data(){
                return{
                    scname:'cjdx',
                    address:'jz'
                }
            }
    }
</script>

App.vue文件

<template>
    <div>
        <school></school>
        <Student></Student>
    </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default ({
    name:'App',
    components:{
        School,Student
    }
    
})
</script>

main.js文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

index.html文件

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

关于不同版本的Vue：

vue.js与vue.runtime.xxx.js的区别：
(1) vue.js是完整版的Vue，包含：核心功能+模板解析器
(2) vue.runtime.xxx.js是运行版的Vue，只包含：核心功能：没有模板解析器
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

ref属性

(1) 被用来给元素或子组件注册引用信息（id的替代品）
(2) 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）vue组件
(3) 使用方式：
打表示：<h1 ref="xxx">..</h1> 或<Student ref="xxx"></Student>
获取：this.$refs.xxx

<template>
    <div>
    	//使用ref="df"
        <h2 ref="df">{{scname}}</h2>
        <h2>{{address}}</h2>
        
        <button @click="display">展示ref</button>
    </div>    
</template>

<script>
    export default{
        name:'School',
        data(){
                return{
                    scname:'cjdx',
                    address:'jz'
                }
            },
        methods:{
            display(){
                console.log(this.$refs.df);
            }
        }    
    }
</script>

结果图
在这里插入图片描述

组件data中组件的复用（prop）

作用：避免相同操作的互相影响，提高工作效率
StudentMix.vue文件

<template>
    <div>
        <h2>{{name}}</h2>
        <h2>{{age1}}</h2>
        <button @click="add">年龄加1</button>
    </div> 
</template>

<script>
export default {
    name:'StudentMix',
    data(){
        return{
           age1:this.age
        }
    },
    props:['name','age'],
    methods:{
        add(){
            this.age1++
        }
    }


}
</script>

App.vue文件

<template>
    <div>
        <StudentMix name="wzm" :age="22"></StudentMix>
        <StudentMix name="lzy" :age="19"></StudentMix>
    </div>
</template>

<script>
import StudentMix from './components/StudentMix.vue'
export default ({
    name:'App',
    components:{
        StudentMix
    }
    
})
</script>

效果图（相同操作，但互不影响）
在这里插入图片描述

mixin(混入)

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

第一步：定义混合，例如
  {
	data(){},
	methods:{
		......
	}
   }

第二步：使用混入，例如
	（1）全局混入：Vue.mixin(xxx)
		//需要在main.js文件中导入
	 (2) 局部混入：mixins:['xxx']

步骤：
新建一个项目
在这里插入图片描述
mixin.js文件

export const hunhe = {

    methods:{
        display(){
             alert(this.scname)
        }
    }   
}

School.vue文件

<template>
    <div>
        <h2>{{scname}}</h2>
        <h2>{{address}}</h2>
        
        <button @click="display">展示</button>
    </div>    
</template>

<script>
    import { hunhe } from "../mixin";

    export default{
        name:'School',
        data(){
                return{
                    scname:'cjdx',
                    address:'jz'
                }
            },
        // methods:{
        //     display(){
        //         alert(this.scname)
        //     }
        // } 
        mixins:[hunhe] 
    }
</script>

插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个是Vue，第二个以后的参数是插件使用者传递的数据

步骤
在这里插入图片描述
plugins.js文件

export default{
    install(Vue){
        Vue.filter('myslice',function(val){
            //截取字符串
            return val.slice(0,1)
        })
    }
}

拓展
在这里插入图片描述
StudentMix.vue文件

<template>
    <div>
        <h2>{{name | myslice}}</h2>
    </div> 
</template>

<script>
export default {
    name:'StudentMix',
    data(){
        return{
           name:'wzm'
        }
    }
}
</script>

结果图
在这里插入图片描述

scoped

作用：为避免各组件中style有重复的类标签等会产生冲突
用法：在组件中使用（不要在App.vue中使用）

<template>
	<div class="demo"></div>
</template>
<script></script>
<style scoped>
	.demo{
       color:pink
	}
</style>