vue 组件 父子传值 子组件触发父组件函数

本文详细介绍了Vue.js中父组件如何使用子组件,包括组件的引入与挂载、父组件向子组件传值的方法及注意事项,以及子组件如何触发父组件的函数实现双向通信。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 父组件使用子组件

父组件将子组件引入

// 引入子组件
import Child from './outDialog';

export default {
  name: 'invoice_out',
  // components 挂载组件到父组件  就可以使用了
  components: { Child },
  data() {
    return {},
  created() {},

2.父子传值

父组件传给子组件的值为字符串时直接修改会报错
所以父组件传给子组件的值不要直接修改 赋值给子组件中的变量之后再进行修改

父组件 在父组件使用的子组件上用 : 变量名冒号绑定一个变量

<chile
      @formVisible="showDialogs"
      :stateCode="stateCode"
    ></chile>

子组件 使用 prop接收父组件的参数

props: {
	变量名 :{
		type: 传递的数据类型,
		default: 默认值,
	}
}

3.子组件触发父组件函数

父组件绑定自定义函数@formVisible="showDialogs"

<chile
      @formVisible="showDialogs"
      @listOutputInvoices="listOutputInvoices"
    ></chile>

子组件触发 父组件上绑定的 listOutputInvoices函数

this.$emit('listOutputInvoices');
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值