一、简单组件
子组件
<template>
<view>
<div id="btnEditDiv">
<image id="btnImag" :src="leftSrc" mode="aspectFit"></image>
<input id="btnEdit" v-model="ed" :placeholder="hintText" @change="inputChange" ></input>
</div>
</view>
</template>
<script>
export default {
props:{
leftText:{
type:String
},
leftSrc:{
type:String
},
hintText:{
type:String
},
defaultText:{
type:String
}
},
data() {
return {
ed:""
};
},
watch:{
defaultText(newdata,olddata){
console.log(newdata+"]]]]]"+olddata)
if(newdata){
this.ed =newdata;
}
}
},
methods:{
inputChange(){
//console.log("??????"+this.$props.defaultText);
this.$emit("change123",this.ed);
}
</script>
父调用
<btnEdit :leftSrc="" leftText='' @change123='this.onchange'></btnEdit>
import btnEdit from "../../components/input/btnEdit.vue"
export default {
components:{
btnEdit
},
method:{
change(){
}
}
二、子子传值
1创建js并new一个vue
import Vue from 'vue'
export default new Vue;
2直接导入无需注册可以用bus
import bus from "../../common/eventBus.js"
3使用这个vue里的on监听
mounted:function(){
bus.$on("call1",(message)=>{
this.showimg=message;
console.log(message);
});
}
4触发页面同样使用emit。
import bus from "../../common/eventBus.js"
bus.$emit("call1",res);
