vue09

目录

一 、配置项props

二、mixin(混入)

三、插件

---

一 、配置项props

功能:让组件接收外部传过来的数据
(1).传递数据: 
<Demo name="xxx" />
(2).接收数据: 

• 第一种方式(只接收) :

props:[' name' ]

• 第二种方式(限制类型) :

props:{
name :String}

• 第三种方式(限制类型、限制必要性、指定默认值) :

props:{
name:{
type :String, //类型
required:true, //必要性
default:'老王'//默认值
}

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

二、mixin(混入)

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

1. 第一步定义混合，例如:{
   data(){....},
   methods:{....}
   }
2. 第二步使用混入，例如:(1).全局混入: Vue . mixin(xxx)
   (2).局部混入: mixins:['xx']

局部混合：
mixin.js: 
export const mix = {
methods: {
showName(){
alert (this.name )
}
},
mounted() {
console.log('你好啊! ')
},
}
export const mix2 = {
data() {
return {
x:100,
y:200
}
},
}
School.vue 
 
<template>
<div>
<h2 @click=" showName">学校名称: {{name}}</h2>
<h2>学校地址: {{address}}</h2>
</div>
</template>
<script>
//引入mix
import {mix , mix2} from ' . ./mixin'
export default{
name : 'School'，
data() {
return {
name:'某某'，
address:'某某' ,
//当data中的数据和method方法冲突时以它本身为主，但生命周期都要起作用
x: 666
}
},
mixins : [mix, mix2]
mounted(){
console.log('你好啊！！！！！')
},
}
</script>

全局混合：
 
main.js:
 
//引入Vue
import Vue from' vue
//引入App
import App from ' . /App.vue'
import {mix, mix2} from ' ./mixin'
//关闭Vue的生产提示
Vue . config . productionTip = false
//vc、vm都会运用
Vue . mixin(mix )
Vue .mixin(mix2)
 
//创建vm
new Vue({
el: ' #app',
render: h =>
h(App)
})
School.vue
<template>
<div>
<h2 @click=" showName">学校名称: {{name}}</h2>
<h2>学校地址: {{address}}</h2>
</div>
</template>
<script>
 
export default{
name : 'School'，
data() {
return {
name:'某某'，
address:'某某' ,
 
x: 666
}
},
 
mounted(){
console.log('你好啊！！！！！')
},
}
</script>

三、插件

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

定义插件:

对象.install = function (Vue, options) {
// 1.添加全局过滤器
Vue . filter(....)
// 2.添加全局指令
Vue . directive(....)
// 3.配置全局混入(合)
Vue . mixin(....)
// 4.添加实例方法（vc与vm均可使用）
Vue . prototype . $myMethod = function () {...}
Vue . prototype . $myProperty = xxxx
}

使用插件:main.js页面import引入，通过 Vue.use(插件名)使用