189 8069 5689

Vue中父子组件间通信的方法是什么

这篇文章主要讲解了“Vue中父子组件间通信的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中父子组件间通信的方法是什么”吧！

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了京山免费建站欢迎大家使用！

1、父组件传递给子组件

  • 父组件传递给子组件：通过props属性；

  • 子组件传递给父组件：通过$emit触发事件；
    Vue中父子组件间通信的方法是什么

 
这里我们知道，父组件有一些数据需要子组件来进行展示，那我们可以通过props来完成组件之间的通信

通过props来完成组件之间的通信

Vue中父子组件间通信的方法是什么
Vue中父子组件间通信的方法是什么

2、浅谈Props

那么什么是Props呢？

  • 作用：接受父组件传递过来的属性

  • Props是你可以在组件上注册一些自定义的attribute（属性）；

  • 父组件给这些attribute（属性）赋值，子组件通过attribute的名称获取到对应的值；

在使用 script setup的单文件组件中，props 可以使用 defineProps() 宏来声明：


const props = defineProps(['foo'])

console.log(props.foo)

1）数组类型

在没有使用 script setup 的组件中，prop 可以使用 props 选项来声明：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

例子，对象语法的使用

  • App.vue里面使用组件，属性整数props所定义的

  • showInfo.vue子组件

 export default {
        props:{
            name :{
                type:String,
                default:"我是默认值name"
            },
            height:{
                type:Number,
                default:2
            }
        }
    }

另外：
那么type的类型都可以是哪些呢？

  • String

  • Number

  • Boolean

  • Array

  • Object

  • Date

  • Function

  • Symbol

2）对象类型

用对象的形式声明props（这个还挺常用的）

使用 script setup

defineProps({
  title: String,
  likes: Number
})

非 script setup

export default {
  props: {
    title: String,
    likes: Number
  }
}

3、子组件传递给父组件

子组件传递给父组件通过$emit触发事件

Vue中父子组件间通信的方法是什么
 
子组件传递内容到父组件：

  • 当子组件有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容；

  • 子组件有一些内容想要传递给父组件的时候；

$emit(“add”, count)
第一个参数自定义的事件名称，第二个参数是传递的参数

举一个计数器案例

  • 这里我们有两个子组件，一个父组件

  • 子组件中定义好在某些情况下触发的事件名称

  • 在父组件中以v-on（语法糖@）的方式传入要监听的事件名称，并且绑定到对应的方法中；

  • 最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件

1）父组件App.vue

  • 父组件监听子组件加或减的事件，通过子组件发生事件给父组件监听

  • 父组件监听子组件发出的自定义事件，然后执行相应的操作

2）子组件1AddCounter.vue

这里定义的是计数器的加操作
子组件事件触发之后，通过this.$emit的方式进行发出事件

3）子组件2SubCounter.vue

这里定义的是计数器的减操作

子组件事件触发之后，通过this.$emit的方式进行发出事件

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

感谢各位的阅读，以上就是“Vue中父子组件间通信的方法是什么”的内容了，经过本文的学习后，相信大家对Vue中父子组件间通信的方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


网站栏目：Vue中父子组件间通信的方法是什么
网站地址：http://jkwzsj.com/article/gopieg.html

其他资讯