在vue开发中我们经常用到控件提供的事件方法,比如el-select的@change方法,比如el-upload的on-success方法,这些方法是有默认回调参数的,这时候如果想自己再传递别的参数,该如何处理呢?
方法很简单,
(defaultParam) => { handleMethod(defauleParam, customerParam) }
handlemethod是调用的方法,比如el-select的@change方法
defauleParam是默认的回调参数,比如change方法的value,这个回调参数如果本身有多个的话,可以根据需求,指定自己需要就可以了
customerParam是自定义参数,可以传自己需要的参数
el-select举例
//控件调用
<el-select v-model="ruleForm.typeId"
placeholder="请选择产品分类"
@change="(val) =>{ onTypeChangeTest(val, 2) }">
<el-option v-for="item in productClassifyOptions"
:key="item.id"
:label="item.typeName"
:value="item.id"/>
</el-select>
//methods中方法实现,val是默认参数,type是自定义参数
onTypeChangeTest(val, type){
window.console.log(val)
window.console.log(type)
el-upload举例
//在el-table的el-table-column使用el-upload,需要将scope.row当做参数传递,处理数据
<template slot-scope="scope">
<div style="display: flex">
<span style="color: red">*</span>
<el-upload
class="avatar-uploader"
:action="urlOrder"
:headers="headers"
name="image"
:show-file-list="false"
:on-success="(res) => {
handleAvatarSuccess(res,scope.row)
:before-upload="beforeAvatarUpload">
<img v-if="scope.row.image" :src="scope.row.image" class="iconImg">
<i v-else class="el-icon-plus iconImg-uploader-icon"></i>
</el-upload>
</template>
//method中的方法,如果上传成功,给数据赋值
handleAvatarSuccess(res,row) {
if (res.code == 0) {
this.$set(row, "image", res.data.url)
Tips:本文拿 ElementUI 框架为例,其他框架同理,都可以参考本文。
在 Vue 项目中,使用 ElementUI 组件时,一些组件都带有 回调方法(Event),如下代码所示:
<el-radio
v-model="radio"
@change="hanlChange"
>备选项</el-radio>
拿到回调参数也非常简单,如下代码所示:
hanlChange(e){
console.log(e)//Object
这样也是错误的:@cha
method1 : function ( event) {
var aaa='test'; //a是菜种操作产生的结巢,这里演示定义了一个空对象
return aaa; // 返回想要的值
method2 : function (event) {
var aaa1 = this.method1(); /..
vue的父子组件传值方式:父传子、子传父
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递
父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:
一、父传子
<template>
<div id="container">
<input type="text" v-model="text" @change="dataChange">
在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 。关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的。今天讲讲在使用Vue自定义指令过程中
1. 怎么数据传递到自定义指令中
2.怎么讲自定义指令中的数据传回到组件实例中
一、将数据传递到自定义指令中
<li class="table-columns...
Vue组件传参一共有三种类型,即父向子传参,子向父传参,兄弟之间传参(只要不是父子关系就都是兄弟组件)
1.父向子传参:
父组件向子组件共享数据需要使用自定义属性----props
比如我们有父组件 Father 和 子组件 Son。如果需要父向子传参时,则需要在子组件Son中添加一个props(与data平级)。在props中可以添加自定义属性,属性名自己取。比如fromfather:{default:0, type:Number} 传参时只需要在父组件中使用子组件<Son :fromfather=
vue中method方法相互调用,该方法不存在
method方法相互调用一般都会是this.functionName() 原本以为是没有任何问题的,但是方法与方法之间的调用就会出幺蛾子。
网上其它博客上说的
调用的时候使用
this.$options.methods.test2();
this.$options.methods.test2.bind(this)();
我试了无效,可能是用的地方不对吧!
例如method中有三个函数 A() 、B()、 C()
一般的简单调用 ,两两之间
<div class="shopLine" @click="goDetails(item.id)" v-for="item,index in cart">
<button @click="goThird">点击跳转第二种方式传参</button>
<button @click="goSi">点击跳转第三种方式传参</button>
在m...