100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue中input输入框触发功能父子组件传值

vue中input输入框触发功能父子组件传值

时间:2024-05-02 21:04:38

相关推荐

vue中input输入框触发功能父子组件传值

子组件:

<template><div class="inputTip"><el-input v-model="currentValue" @input="childClick"></el-input><el-tooltip class="item" effect="dark" :content="msg" placement="top"><i class="el-icon-warning-outline"></i></el-tooltip></div></template><script>export default {name: 'inputTip',props: {msg: String},data () {return {currentValue: ''}},methods: {childClick () {this.$emit('inputHandle', this.currentValue)}}}</script>

父组件:

<template><div class="userAdd"><el-form><el-form-item label="活动名称"><input-tip :msg="msg" @inputHandle="inputHandle"></input-tip></el-form-item></el-form></div></template><script>import InputTip from '../../../components/inputTip'export default {name: 'userAdd',components: {InputTip},data () {return {msg: '提示信息',selectVal: ''}},methods: {inputHandle (val) {this.selectVal = val}}}</script>

自己编辑

子组件:

<template><view><view class="content_box"><view class="explain_box"><view class="blue_icon"></view><view class="explain_text">{{title}} <span style="color:#FF0C5C;margin:10rpx;">*</span></view><view class="input_box"><textarea v-model="changeValue"@input="descInput" placeholder-class="phClass":placeholder=placeholderclass="uni-input" maxlength="200"></textarea><span class="numberv">{{txtVal}}/200</span></view></view></view></view></template><script>export default {props: {/*** 标题*/title: {default: '变更说明',type: String},/*** 占位说明*/placeholder: {default: '请输入',type: String}},components:{},data() {return {changeValue:'',txtVal: 0,};},methods:{descInput(){this.txtVal = this.changeValue.lengththis.$emit('inputHandle', this.changeValue)},}}</script><style lang="less" scoped>.content_box{width: 690rpx;background-color: #fff;margin: 24rpx auto 0 auto;border-radius: 20rpx;.explain_box{padding: 35rpx 30rpx 61rpx 30rpx;.blue_icon{width: 8rpx;height: 28rpx;background: #027AFF;border-radius: 4px;}.explain_text{font-size: 30rpx;font-weight: bold;color: #333333;margin: -33rpx 0 0 20rpx;}}.uni-input{// border: 1px solid red;width: 582rpx;height: 160rpx;}.phClass{color: #E3E3E3;font-size: 26rpx;}.input_box{border: 1px solid #E3E3E3;width: 582rpx;height: 200rpx;position: relative;margin-top: 36rpx;padding: 25rpx 24rpx 0 24rpx;.numberv{position: absolute;right: 0;bottom: 0;}}}</style>

父组件

<input-textarea title="变更说明" placeholder='请输入变更说明' @inputHandle="inputHandle"></input-textarea>methods:{inputHandle(val){this.changeValue=val},}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。