vue插槽与父子组件传值

最新推荐文章于 2023-02-23 21:35:34 发布

weixin_33806509

最新推荐文章于 2023-02-23 21:35:34 发布

阅读量1w

点赞数 8

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c832980e51d45395b364796

版权

本文详细介绍了Vue中父子组件之间的传值方式，包括子组件通过$emit向父组件传递值，以及父组件通过props向子组件传递数据。同时，文章深入探讨了插槽的概念，讲解了基本插槽、具名插槽和作用域插槽的使用，特别是如何在父组件中访问子组件的数据。最后，总结了父子组件传值与插槽的区别，帮助读者理解这两者在实际应用中的不同场景和作用。

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

1.父子组件之间的传值

子组件传值到父组件

子组件在向父组件传值的时候，主要是通过子组件通过$emit()函数派发出事件，然后再父组件中通过事件监听:

//比如定义了一个子组件<i-button>
<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>
<script>
  export default {
    methods: {
      handleClick () {
        this.$emit('on-click', {a:123});
      }
    }
  }
</script>
//这里的on-click是事件的名字，a是要传递的参数

//然后在父组件中监听
<i-button @on-click="sayhi">sayhi</i-button>

<script>
  export default {
        methods:{
         sayhi(b){
          console.log(b);  // Vue.js
        }
      }
  }
</script>
//注意这里的b只是用来接收子组件传递过来的对象，输入的是{a:123},并不会输出123,如果输出123可以写成b.a
复制代码