定义一个组件
const component = {
template:`<div><span v-show="active" @click="handleChange"> is me{{propsOne}}</span></div>`,
data () { //如果不是通过new Vue方式的data,data是个函数,不然数据变动时会影响其他数据
return {
text:123
}
},
}
定义组件名为compOne
//全局组件,引用该组件
Vue.component('compOne',component)
局部组件
new Vue({
//局部组件
components:{
comp:component
}
}
二组件的props
props:{ //定义组件在被外部使用时可变的行为
active:Boolean,
propsOne:string,
onChange:Function,
active:{
type:Boolean,
require:true,//必须传入的
define:true//默认值,
validator(value){ //自定义验证props
return typeof value === 'boolean'
}
}
},
<comp :active="false" props-one="345"></comp>
<comp :active="true" props-one="345"></comp>
三、修改props定义的值
修props定义的值,vue用再props中定义一个对象修改。在组件中:on-change="handleChange"传递一个handleChange,在data中定义一个变量prop1,在method中定义handleChange函数,操作prop1,组件中:propsOne="prop1",修改成功。
全局组件中需要在methods方法中执行handleChange()调用onChange()
//修改propsOne的值
const component = {
props:{
active:Boolean,
onChange:Function,
propsOne:string,
},
template:`<div>
<span v-show="active" @click="handleChange"> is me{{propsOne}}</span>
</div>`,
//在组件中触发handleChange
methods:{
handleChange(){
this.onChange()
}
}
}
new Vue({
data:{
prop1:'text1'
},
//局部组件
components:{
comp:component
},
el:'#root',
template:`<div>
<comp ref = "comp1" :active="true" :propsOne="prop1" :on-change="handleChange" ></comp>
<comp :active="false" props-one="345"></comp>
<comp :active="true" props-one="345"></comp>
</div>`,
methods:{
handleChange(){
this.prop1+=1
}
}
})