Vuejs父组件访问子组件属性
# 父组件访问子组件属性/方法
# 1. 子组件定义ref属性
<SalesOrderPaymentCom
ref="SalesOrderPaymentCom"
>
</SalesOrderPaymentCom>
1
2
3
4
2
3
4
# 2. 父组件访问 $refs 属性
# 访问子组件属性
// this.$refs.ref名称.子组件属性名
this.$refs.SalesOrderPaymentCom.paymentList
1
2
2
# 访问子组件方法
// this.$refs.ref名称.子组件方法名
this.$refs.SalesOrderPaymentCom.showAlert()
1
2
2
# 子组件访问父组件属性
# 1. 父组件定义components
components: {
Autocomplete
}
1
2
3
2
3
# 2. 子组件定义props
// 将total_paid, amount_to_pay引入
props: ["total_paid", "amount_to_pay"],
1
2
2
# 3. 子组件使用调用方法
// 与本地方法调用方式相同
console.log(this.total_paid)
console.log(this.amount_to_pay)
1
2
3
2
3
# 子组件访问父组件方法
# 1. 父组件定义components
components: {
Autocomplete
}
1
2
3
2
3
# 2. 父组件定义provide
// 将父组件的paymentAmountChange()的方法，提供为paymentAmountChange
provide() {
return {
paymentAmountChange: this.paymentAmountChange,
};
},
1
2
3
4
5
6
2
3
4
5
6
# 3. 子组件定义inject
// 将paymentAmountChange引入
inject: ["paymentAmountChange"],
1
2
2
# 4. 子组件使用调用方法
// 与本地方法调用方式相同
this.paymentAmountChange(record)
1
2
2
上次更新: 2023/10/18, 08:38:42