Vue|vue - props配置项\ mixin\插件\scoped javascript|前端|vue.js

props配置项

功能：让组件接收外部传过来的数据
传递数据：
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
  
  props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin(混入)

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

{ data(){....}, methods:{....} .... }

第二步使用混入：
? 全局混入：Vue.mixin(xxx)
? 局部混入：mixins:['xxx']

// mixin.js export const hunhe = { methods: { showName(){ alert(this.name) } }, mounted() { console.log('你好啊！') }, } export const hunhe2 = { data() { return { x:100, y:200 } }, }

// main.js //引入Vue import Vue from 'vue' //引入App import App from './App.vue' import {hunhe,hunhe2} from './mixin' //关闭Vue的生产提示 Vue.config.productionTip = falseVue.mixin(hunhe) Vue.mixin(hunhe2)//创建vm new Vue({ el:'#app', render: h => h(App) })

插件

功能：用于增强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|vue - props配置项\ mixin\插件\scoped】使用插件：Vue.use()

scoped样式