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

最新推荐文章于 2023-10-20 14:15:15 发布

原创最新推荐文章于 2023-10-20 14:15:15 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

vue 同时被 3 个专栏收录

23 篇文章

订阅专栏

JavaScript

23 篇文章

订阅专栏

小程序

10 篇文章

订阅专栏

本文探讨了在Vue.js中如何通过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=placeholder
						 class="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.length
				this.$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
			},
		}