vue子组件调用父组件的方法
一开始感觉调用方法应该和react差不多,父组件传入子组件,子组件调用就行了。但感觉应该还有其他方法,于是将这些方法记录下。
1、父组件中把方法作为属性传入子组件,在子组件里直接调用这个方法
父组件中引用子组件:
<bill-table
:billDetail="billDetail"
:setBillDetail="setBillDetail"
></bill-table>
子组件中写法:
<span @click="setBillDetail(null)"><i class="el-icon-arrow-left"></i>返回</span>
export default {
props: {
setBillDetail: {
type: Function,
default: null,
},
},
}
一定要在props
里声明setBillDetail
函数,不然setBillDetail
始终为undefined
!!!
初学vue
,自己就踩了个大坑,忘记在props
里加了。
2、子组件里用$emit
向父组件触发一个事件
父组件:
<bill-table
v-if="billDetail"
:billDetail="billDetail"
@setBillDetail="setBillDetail"
></bill-table>
子组件:
<span @click="$emit('setBillDetail', null)"><i class="el-icon-arrow-left"></i>返回</span>
这样写,编译会通过,但eslint
会给出error
:
查了下官网 event-names 事件的命名规范。由于下面2点原因,更推荐
kebab-case
(短横线)命名方式。
于是将父子组件内容分别修改如下:
父组件(
Props
同样适用):
<bill-table
v-if="billDetail"
:bill-detail="billDetail"
@set-bill-detail="setBillDetail"
></bill-table>
子组件:
<span @click="$emit('set-bill-detail', null)"><i class="el-icon-arrow-left"></i>返回</span>
总之,记住一句话:HTML
中的 attribute
名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符,更推荐 kebab-case
。
3、直接在子组件中通过this.$parent.event
来调用父组件的方法
此处举例省略。
参考:
Vue子组件调用父组件的方法
发表评论 (审核通过后显示评论):