Vue组件_props配置_mixin混合_插件_scoped样式

一个重要的内置关系

组件的本质是名为VueComponent的构造函数

每次调用Vue.extend 返回的都是一个全新的组件

一个重要的内置关系

VueComponent.prototype.__proto__ === Vue.prototype

为什么要有这个关系？
让组件实例对象（vc）可以访问到Vue原型上的属性、方法

例如：给Vue原型上添加一个方法，vm和vc都可以使用

Vue.prototype.hello = ()=>{alert('你好')}

一、props配置

作用：让组件接收外部传来的数据

例如：Student是一个组件，置于App中

1.传递数据：App.vue中

<Student name="李四" sex="女" v-bind:age="18"></Student>

**注：**接收到的数据为字符串类型，上述需使用:age

2.接收数据：Student.vue中

接收数据三种方法：

①简单接收（数组）

props:['name','age','sex']

②接收同时对数据进行类型限制

props:{
    name:String,
    age:Number,
    sex:String
}

③接收的同时对数据进行类型限制+默认值的指定+必要性的限制

props:{
    name:{
      type:String,
      required:true     //必要
    },
    age:{
      type:Number,
      default:99    //默认值
    },
    sex:{
      type:String,
      required:true
    }
}

**注：**props只读 不可修改，如果需要修改，复制props内容到data中

例如：实现点击按钮=>age+1，Student.vue代码如下

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生年龄：{{ myAge+1 }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <button @click="updateAge">尝试修改年龄</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      msg:"我是一个学生",
      myAge:this.age
    }
  },
  props:['name','age','sex'],    //简单接收
  methods: {
    updateAge(){
      this.myAge++;
    }
  },
};
</script>

二、mixin混合

作用：可以把多个组件共用的配置提取成一个混入对象

1.定义混合

单独写出一个js文件来保存共用配置

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

2.使用混入

子组件中写入

全局：

Vue.mixin()

局部：

mixins:[mixin]

注： 当发生冲突时，data中数据和methods中方法都以自身本来的为主，但mouted函数中内容都要，混合中的内容在前，自身本来的在后

三、插件

插件的本质是对象

1.定义插件

单独写一个js文件保存插件内容

export default{
    install(Vue){.....}
}

2.使用插件

在main.js文件中编写

//引入
import plugins from './plugins'
//使用
Vue.use(plugins)

四、scoped样式

在两个并列组件中使用同一类名编写样式时，发生冲突：后引入的组件样式覆盖先引入的组件。

解决办法：使用scoped

<style scoped>
  .demo{
    background-color: skyblue;
  }
</style>