Vue传值（3种常用传值方法）

最新推荐文章于 2024-08-08 17:23:21 发布

码出未来jgs

最新推荐文章于 2024-08-08 17:23:21 发布

阅读量1.1k

点赞数 1

分类专栏： Vue 文章标签： vue 传值方法

本文链接：https://blog.csdn.net/jgs525/article/details/90453726

版权

本文详细介绍了Vue中三种常用的组件间通信方式：父组件向子组件传值，子组件向父组件传值，以及非父子组件间的通信。通过属性绑定实现父传子，通过事件触发实现子传父，对于非父子组件，利用公共的bus.js文件作为中介进行通信。

摘要由CSDN通过智能技术生成

Vue传值（3种常用传值方法）

父组件传值给子组件，首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上。然后子组件用属性props接收。
子组件传值父组件，首先是子组件发送的形式是this.$emit(事件名,需要发送的值)，事件名：父组件on监听的方法，父组件第一件事就是监听子组件发送过来的事件名，@事件名=获取值的方法。获取值的方法（值）*，就这样拿到了儿子发过来的值
兄弟传值，两个都要引入公共js->bus。首先是发送者，this.$emit(名字，值)。然后是接受者,this.$on(“传过来的那个名字”，函数（值）)，这里要注意的是接受者的这个监听事件应该是放在钩子mounted事件内。同时注意this指向问题。（可用封装方法）

父组件向子组件进行传值：

父组件：

        <template>
      <div>
        父组件:
        <input type="text" v-model="name">
        <br>
        <br>
        <!-- 引入子组件 -->
        <child :inputName="name"&g