组件间对于setup中数据进行传递获取

2022-08-02 12:59:11

vue2中组件间数据传输
子组件

<input type="text":value="modelValue" @input="onInput">
 
 props:{
   modelValue: String},
 
 methods:{onInput(e){this.$emit('form-input1', e.target.value)}}

父组件

<ValideInput1 @form-input1="formInput1" v-model="inputValue"/>import ValideInput1from'./components/ValideInput1.vue';data(){
	inputValue:''}

methods:{formInput1(val){
      console.log(val)}}

setup中
子组件

<template><input type="text":value="modelValue" @input="onInput"></template><script>import{ defineComponent, reactive}from'vue'exportdefaultdefineComponent({
  name:'valideInput',
  props:{
    modelValue:''},
  emits:['form-input'],//定义事件名称setup(props, context){//接收props参数,可以拿到其他组件传入进来的数据constonInput=(e)=>{//使用context的emit方法上传对应的值
      context.emit('form-input', e.target.value)}return{
      onInput}}})</script>

父组件

//@form-input监听,名称与子组件中定义的事件名称相同<ValideInput @form-input="formInput" v-model="inputValue"/>import ValideInputfrom'./components/ValideInput.vue';setup(){const inputValue='1111'constformInput=(val)=>{
      console.log(val)}//setup中数据返回出去,可以供其他组件选项使用return{
      inputValue, formInput}},
  • 作者:前端程序媛~柚子
  • 原文链接:https://blog.csdn.net/qq_28846389/article/details/114697059
    更新时间:2022-08-02 12:59:11