精华内容
下载资源
问答
  • vue 子组件向父组件传值 子组件: 父组件接收使用: 使用

    vue 子组件向父组件传值

    子组件:

    在这里插入图片描述
    在这里插入图片描述

    父组件接收使用:

    在这里插入图片描述
    使用
    在这里插入图片描述

    展开全文
  • vue子组件向父组件传值 子组件:uploadData.vue 父组件:upload.vue

    子组件:uploadData.vue
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    父组件:upload.vue
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性**。 子组件向父组件传值 父组件中引入子组件 使用...

    子组件使用this.$emit()向父组件传值

    在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性**。
    子组件向父组件传值

    • 父组件中引入子组件
      使用important引入组件
      比如

      import diubao  from './diubao'
      

      声明

      //定义组件
      export default {
      	components: {
            diubao 
          }
      }
      

      使用组件

      <diubao v-if="diubaoShow" @diubaosend="sendmessage" ref="toDiubao"/>
      
    • 子组件向父组件传值
      子组件向父组件传值使用 this.$emit(“function” , param); 其中function为父组件定义函数,param为需要传递参数。

      sendmessage(params) {
          this.$emit('diubaosend', params)
      },
      

      父组件中,在引用子组件处添加函数v-on:function=“function1”,其中function为子组件中定义函数,function1为父组件中定义函数----用于接收子组件传值并进行数据处理,可定义为同一名称。

      <diubao v-if="diubaoShow" @diubaosend="sendmessage" ref="toDiubao"/>
      
      sendmessage(params) {
          console.log("index", params)
          this.$refs.toSocket.onSendWebsocket(params);
      },
      

    父组件触发子组件方法

    1、在子组件中:<div></div>是必须要存在的 ;
    2、在父组件中:首先要引入子组件import Child from './child';
    3、 <child ref="mychild"></child>是在父组件中为子组件添加一个占位,ref="mychild"是子组件在父组件中的名字;
    4、父组件中components: {是声明子组件在父组件中的名字;
    5、在父组件的方法中调用子组件的方法,很重要this.$refs.mychild.parentHandleclick("嘿嘿嘿");

    展开全文
  • 下面小编就为大家分享一篇vue 子组件向父组件传值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题开发中,会发现很多公共部分,可以独立封装起来,让更多的地方统一调用,这就是组件的作用,今天简单封装了一个图片上传的组件,当子组件中图片上传成功后,怎么传到父级组件呢?代码直接上代码...

    问题

    开发中,会发现很多公共部分,可以独立封装起来,让更多的地方统一调用,这就是组件的作用,今天简单封装了一个图片上传的组件,当子组件中图片上传成功后,怎么传到父级组件呢?

    代码

    直接上代码

    父组件

    <upload-image
    label="网站LOGO"
    prop="site_logo"
    :value="basicForm.site_logo"
    @func="getImg"
    />
    <script>
    import uploadImage from '../../components/uploadImage.vue'
    export default {
      components: { uploadImage },
        // 其他代码
    }
    

    子组件

    <!--
     * @Description:单图上传
     * @User: Vijay <1937832819@qq.com>
     * @Date: 2020-11-21 20:42:50
    -->
    <template>
      <div>
        <el-form-item :label="label" :prop="fieldName">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="{ Authorization: 'Bearer ' + this.token }"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="img" :src="img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </div>
    </template>
    <script>
    import util from '@/libs/util'
    import axios from 'axios'
    export default {
      props: {
        label: {
          type: String,
          default: ''
        },
        value: {
          type: String,
          default: ''
        },
        fieldName: {
          type: String,
          default: ''
        }
      },
      data() {
        return {
          img_file: {},
          token: util.cookies.get('token'),
          uploadUrl: process.env.VUE_APP_API + 'admin/article/upload',
          img: this.value
        }
      },
      methods: {
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg'
          const isLt2M = file.size / 1024 / 1024 < 2
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        },
        handleAvatarSuccess(res, file) {
          this.img = URL.createObjectURL(file.raw)
          // func: 是父组件指定的传数据绑定的函数,this.img:子组件给父组件传递的数据
          this.$emit('func', this.img)
        },
        // 绑定@imgAdd event
        $imgAdd(pos, $file) {
          // 第一步.将图片上传到服务器.
          var formdata = new FormData()
          formdata.append('file', $file)
          this.img_file[pos] = $file
          axios({
            url: this.uploadUrl,
            method: 'post',
            data: formdata,
            headers: {
              Authorization: 'Bearer ' + this.token,
              'Content-Type': 'multipart/form-data'
            }
          })
            .then((res) => {
              // let _res = res.data
              // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
              // this.$refs.md.$img2Url(pos, _res.url)
            })
            .catch((err) => {
              console.log('err', err)
            })
        },
        $imgDel(pos) {
          delete this.img_file[pos]
        }
      }
    }
    </script>
    

    解释

    子组件通过this.$emit()的方式将值传递给父组件

    // func: 是父组件指定的传数据绑定的函数,this.img:子组件给父组件传递的数据
    this.$emit('func', this.img)
    

    注意:这里的func是父组件中绑定的函数名
    父组件中接收传递值

    @func="getImg"
     getImg(data) {
     // 这里可以拿到传过来的值
     console.log(data)
     }
    
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,274
精华内容 909
关键字:

vue子组件向父组件传值

vue 订阅