1.子组件
<template name='my-input'>
<view>
<input v-model="age" type="text" value="" :placeholder="placeholder" class="my-input"/>
<button type="primary" @click="submitForm">提交</button>
</view>
</template>
<script>
export default {
name:'my-input',
data() {
return {
age:'',
};
},
props:{
placeholder:{
type:String,
default:"请输入姓名..."
},
},
created() {
console.log('created')
},
watch:{},
methods:{
submitForm(){
this.$emit('getValue',this.age)
},
setValue(val){
this.age = val;
}
},
computed:{},
mounted() {
console.log('mounted')
}
}
</script>
<style lang="less" scoped>
.my-input{
padding: 20rpx;
background: #F4F5F6;
}
</style>
2.父组件
<template>
<view class="content">
<!-- 自定义组件使用 -->
<text style="font-size: 40rpx;color: #F76260;">1.自定义myInput</text>
<myinput placeholder="请输入年龄" @getValue="getName" ref='myinput'></myinput>
</view>
</template>
<script>
import myinput from '../../components/myInput.vue'
export default {
components:{
myinput
},
data() {
return {
newList:[]
}
},
onLoad() {
const val = '父组件传来的初始化值'
this.$refs.myinput.setValue(val); //调用子组件方法给子组件赋值
},
methods: {
//点击子组件submitForm方法传来的值
getName(val){
console.log('子组件传值过来了---'+val)
},
}
}
</script>