首页vu e父子组件通信props

vu e父子组件通信props

时间: 2023-10-13 12:04:38 浏览: 151

vue之父子组件间通信实例讲解(props、$ref、$emit)

Vue 之父子组件间通信实例讲解（props、$ref、$emit）在 Vue 中，组件间的通信是非常重要的知识点之一。本文将通过 props、$ref 和 $emit 三个知识点，来讲解如何实现父子组件间的通信。让我们来建立两个组件，father.vue 和 child.vue，作为示例的基础。 // 父组件 <template> <div> <h1>我是父组件！</h1> <child></child> </div> </template> <script> import Child from '../components/child.vue' export default { components: { Child }, } </script> // 子组件 <template> <h3>我是子组件！</h3> </template> <script> </script> 这两部分的代码都很清晰明了，父组件通过 import 的方式导入子组件，并在 components 属性中注册，然后子组件就可以用标签 <child> 的形式嵌进父组件中。一、通过 props 实现通信 props 是 Vue 中最基本的组件间通信方式。 props 是单向绑定的，即只能父组件向子组件传递，不能反向。有两种方式可以传递 props：静态传递和动态传递。（1）静态传递静态传递子组件通过 props 选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据。  <template> <div> <h1>我是父组件！</h1> <child message="我是子组件一！"></child> </div> </template> <script> import Child from '../components/child.vue' export default { components: { Child }, } </script>  <template> <h3>{{ message }}</h3> </template> <script> export default { props: ['message'] // 声明一个自定义的属性 } </script> （2）动态传递动态传递我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过 v-bind 绑定 props 的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。  <template> <div> <h1>我是父组件！</h1> <child message="我是子组件一！"></child>  <child v-bind:message="a+b"></child>  <child v-bind:message="msg"></child> </div> </template> <script> import Child from '../components/child.vue' export default { components: { Child }, data() { return { a: '我是子组件二！', b: 112233, msg: '我是子组件三！' + Math.random() } } } </script>  <template> <h3>{{ message }}</h3> </template> <script> export default { props: ['message'] } </script> 二、通过 $ref 实现通信 $ref 是 Vue 中用于注册组件实例的引用信息的。通过 $ref 可以获取到子组件里的属性和方法。（1）如果 $ref 用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过 $ref 可以获取到在子组件里定义的属性和方法。（2）如果 $ref 在普通的 HTML 元素上，可以理解为对元素的索引，可以通过 $ref 获取到元素的 DOM 节点。三、通过 $emit 实现通信 $emit 是 Vue 中用于触发事件的方法。父组件可以通过 $emit 触发事件，然后子组件可以通过 $on 监听事件从而实现通信。 props、$ref 和 $emit 是 Vue 中实现父子组件间通信的三种方式，各有其特点和应用场景。通过这三种方式，可以灵活地实现父子组件间的通信，从而增强应用程序的灵活性和可维护性。

Vue组件通信可以通过多种方式实现，以下是一些常见的方法： 1. Props/Attributes: 父组件可以通过props将数据传递给子组件。子组件可以通过props接收并使用这些数据。 2. 事件：子组件可以通过$emit触发自定义事件，父组件可以通过v-on监听这些事件并执行相应的操作。 3. 中央事件总线：可以创建一个Vue实例作为事件总线，用于在组件之间进行通信。任何组件都可以通过这个事件总线触发和监听事件。 4. Vuex：Vuex是Vue的官方状态管理库，用于管理共享状态。可以在多个组件之间共享数据，以实现组件之间的通信。 5. $ref：可以使用$ref访问子组件的实例，从而直接调用子组件的方法或访问子组件的属性。 6. Provide/Inject：父组件通过provide提供数据，子组件通过inject注入并使用这些数据。根据具体的场景和需求，选择合适的通信方式来实现组件之间的交互。

阅读全文