uni-组件

一、简单组件

子组件

<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);