vue父子组件传值

我想实现一个在父组件上点击,然后弹出一个子组件窗口,涉及到的知识点主要是:

  • 子组件用props属性接收父组件传过来的值
  • 子组件用this.$emit向父组件发送事件xxx
  • 父组件用@xxx="yyy"监听xxx事件,然后执行yyy函数

具体说来是这样:
0.首先当然是父组件import子组件,在components中注册子组件
1.在父组件中定义一个属性,用于控制子组件是否可见

//script
data () {
    return {
      dialogVisible: false,
    }
  },

父组件的前端代码部分,像下面这样写
在这里插入图片描述
子组件的前端代码部分,像下面这样写:
在这里插入图片描述

有6个部分,我逐一解释说明:

1) 首先submit-frame是我的子组件
2) submitTest是父组件的点击事件,内容如下,主要就是修改dialogVisible的值

submitTest(){
      this.dialogVisible=true;
      console.log(this.dialogVisible);
    },

3) dialog-form-visible是子组件的props属性,用于接收从父组件中传过来的值

props:{
    dialogFormVisible:{
      type: Boolean,
      default: false
    }
  }

4) 子组件中用visible.sync="dialogFormVisible"来控制这个组件是否可见,这样,父组件向子组件传消息的过程就完成了

接下来是子组件向父组件传值

1) 子组件中用handle-close处理点击关闭按钮(也就是点击弹出框右上角的那个×)事件,内容如下:

handleClose(){
      this.$emit('hideDialog')
    },

用于向父组件发送hideDialog事件

2) 然后我们再回来看一下父组件的前端的这部分代码:@hideDialog=“hideDialog”
在这里插入图片描述
等号左边的@hidedialog就是用来监听子组件传过来的hideDialog事件,监听到后,就执行父组件中定义的hideDialog事件:

hideDialog(){
      this.dialogVisible=false;
      console.log(this.dialogVisible);
    },

这样,子组件就又被隐藏了

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue是一种流行的JavaScript框架,用于构建用户界面。在Vue中,父子组件之间传递数据是一种常见的需求。以下是一种常用的方法来实现父子组件之间的数据传递: 1. Props(属性):父组件可以通过props属性向组件传递数据。在父组件中,通过在组件标签上绑定属性的方式传递数据。在组件中,可以通过props选项接收并使用这些数据。 父组件: ```html <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' }; } } </script> ``` 组件: ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] } </script> ``` 2. $emit(自定义事件):组件可以通过$emit方法触发自定义事件,并将需要传递的数据作为参数传递给父组件。在父组件中,通过在组件标签上监听自定义事件的方式接收数据。 父组件: ```html <template> <div> <child-component @child-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleChildEvent(data) { console.log(data); // 在这里处理组件传递的数据 } } } </script> ``` 组件: ```html <template> <div> <button @click="emitEvent">触发事件</button> </div> </template> <script> export default { methods: { emitEvent() { this.$emit('child-event', 'Hello from child component'); // 触发自定义事件,并传递数据给父组件 } } } </script> ``` 以上是Vue中实现父子组件之间传递数据的两种常用方法。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值