Vue组件间如何实现复杂的长尾词级数据传递和通信？

本文共计1774个文字，预计阅读时间需要8分钟。

相关知识点：父子组件传值、子组件传值到父组件、兄弟组件之间传值、祖孙和后代之间传值、任意两个组件之间传值、子组件传值到父组件、子组件传值到父组件的基本方法有三个，分别为。

相关知识点

• 父组件传值到子组件
• 子组件传值到父组件
• 兄弟组件之间传值
• 祖代和后代之间传值
• 任意两个组件之间传值

父组件传值到子组件

父组件传值到子组件基本方法有三个，分别为：

• 属性 props
• 引用 $refs
• 子元素 $children

日常开发中，我们用到 props 和 $refs 频率比较多，$children 相对较少些（我就没怎么使用过~）。

属性 props

在父组件中添加属性，在子组件中接收使用，例如：

父组件：

<HelloWorld msg="Welcome to Your Vue.js App" />

子组件：

<h1>{{ msg }}</h1> props: { msg: String }

引用 $refs

在父组件中可以使用 this.$refs.xxx 获取子组件中定义的数据或者方法，并使用。