-
vue 子组件向父组件传值
2020-08-24 10:50:18 -
vue子组件向父组件传值
2019-09-10 14:59:42 -
Vue子组件向父组件传值
2019-12-27 09:01:53在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是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 子组件向父组件传值方法
2020-08-27 23:15:37下面小编就为大家分享一篇vue 子组件向父组件传值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Vue 子组件向父组件传值
2020-12-03 10:00:00问题开发中,会发现很多公共部分,可以独立封装起来,让更多的地方统一调用,这就是组件的作用,今天简单封装了一个图片上传的组件,当子组件中图片上传成功后,怎么传到父级组件呢?代码直接上代码父...问题
开发中,会发现很多公共部分,可以独立封装起来,让更多的地方统一调用,这就是组件的作用,今天简单封装了一个图片上传的组件,当子组件中图片上传成功后,怎么传到父级组件呢?
代码
直接上代码
父组件
<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替换到文本原位置 ->  // 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) }
收藏数
2,274
精华内容
909