学习day52

1.关于

error Component name "School" should always be multi-word vue/multi-word-component-names

这里是因为脚手架的规范原因，

解决办法：

我是在vue.comfig.js文件中加入了一条配置，即

  lintOnSave:false 

整个文件的完整代码是

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false 
})

初次使用

School.vue

Student.vue

App.vue

main.js

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

Vue.config.productionTip = false

new Vue({
  el:"#app",
  render: h => h(App),
})

render函数

使用它的原因是因为它的功能是比较齐全的

原生写法

 简约

 

其实就是帮我们创建模板，加载组件。

为什么要用render？因为vue-cli默认加载的是运行版本的Vue，它不认识 template和components这两个标签，所以只能用render。

 

ref属性

 

props配置

 Student.vue

App.vue

mixin混入

mixin.js

export const mixin={
    methods:{
        showName(){
          alert(this.name)
        }
      }
}


  

 1.局部混入

Student.vue

通过这样的引入方式，函数就引入进去了

2.全局引入

直接在main.js中进行一个引入

//引入Vue
import Vue from 'vue';
//引入Vue
import App from './App.vue'

import {mixin} from './mixin'

//关闭Vue的生产提示
Vue.config.productionTip=false

Vue.mixin(mixin)

//创建vm
new Vue({
    el:"#app",
    render:h =>h(App)
})

插件

可以将之前学的全局指令，混入什么的都放入插件，然后使用

 

plugins.js

export default{
    install(){
        console.log('@@install')
    }
}

main.js

//引入Vue
import Vue from 'vue';
//引入Vue
import App from './App.vue'

//引入插件
import plugins from './plugins';

//关闭Vue的生产提示
Vue.config.productionTip=false

//应用插件
Vue.use(plugins)

//创建vm
new Vue({
    el:"#app",
    render:h =>h(App)
})

scoped

scoped解决的痛点：

两个不同的组件，class属性重名

类选择器也都一样，但是颜色不同。

如果此时在app处同时引入这两个组件，就会引发样式冲突！

Student.vue

School.vue