组件间通讯方法

左手的ㄟ右手 2023-06-08 04:37 11阅读 0赞

1.父组件向子组件传值

在父组件中使用子组件，本质通过v-bind绑定属性传入子组件，子组件通过props接收父组件传入的属性。

明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 `users:["Henry","Bucky","Emily"]`

//App.vue父组件
    <template>
      <div id="app">
        <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
      </div>
    </template>
    <script>
    import Users from "./components/Users"
    export default {
      name: 'App',
      data(){
        return{
          users:["Henry","Bucky","Emily"]
        }
      },
      components:{
        "users":Users
      }
    }

//users子组件
    <template>
      <div class="hello">
        <ul>
          <li v-for="user in users">{
       {user}}</li>//遍历传递过来的值，然后呈现到页面
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: 'HelloWorld',
      props:{
        users:{           //这个就是父组件中子标签自定义名字
          type:Array,
          required:true
        }
      }
    }
    </script>

2.子组件向父组件传值（通过事件形式）

子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件，父组件通过v-on接收子组件传入的方法，并接收子组件传入的参数。

// 子组件
    <template>
      <header>
        <h1 @click="changeTitle">{
       {title}}</h1>//绑定一个点击事件
      </header>
    </template>
    <script>
    export default {
      name: 'app-header',
      data() {
        return {
          title:"Vue.js Demo"
        }
      },
      methods:{
        changeTitle() {
          this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
        }
      }
    }
    </script>
    复制代码
    // 父组件
    <template>
      <div id="app">
        <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
       // updateTitle($event)接受传递过来的文字
        <h2>{
       {title}}</h2>
      </div>
    </template>
    <script>
    import Header from "./components/Header"
    export default {
      name: 'App',
      data(){
        return{
          title:"传递的是一个值"
        }
      },
      methods:{
        updateTitle(e){   //声明这个函数
          this.title = e;
        }
      },
      components:{
       "app-header":Header,
      }
    }
    </script>

3.**非父子组件间的数据传递，兄弟组件传值**

可以隔代通信，不必像使用v-bind数据绑定一样，需要用prop逐层传递

可通过 PubSubJS 库来实现非父子组件之间的通信 ，使用 PubSubJS 的消息发布与订阅模式，来进行数据的传递。

// 子组件发布消息
        /* Todo.vue */
        methods : {
            delete_data(){ // 子组件私有函数
                if(window.confirm(`确认要删除吗`)){
                /* 发布消息 */
                PubSub.publish("delete_data", comment) // 参数一：消息名；参数二：需要传递的参数数据
            }
        }
    
        // 爷组件订阅消息
        /* App.vue */
        mounted() { //挂载后就订阅
            /* 订阅消息 */
            PubSub.subscribe('delete_data' , (msg , comment)=>{    // 参数一msg：暂时无关紧要，但是必须写；参数二：对应传递的数据
            this.delete_data(comment)    // 调用此组件里的函数
            // this.comments_data = this.comments_data.filter(item => item!=comment)
        })
        }
    
    /**
    *孙组件如果调用了含有发布消息的函数，订阅消息里的操作便会被触发，同时也会伴随组件数据以函数参数进行传递

父组件： App.vue

<template>
      <div id="app">
        <Child_1/>
        <hr>
        <Child_2/>
      </div>
    </template>
    <script>
      import Child_1 from "./Child_1";
      import Child_2 from "./Child_2";
        export default {
            name: 'App',
            components:{
              Child_1,
              Child_2
            },
        }
    
    </script>
    <style>
    </style>

子组件一：Child\_1.vue

<template>
        <div>
          <p>child-1 组件</p>
          <button @click="info_child_2">通知Child-2</button>
        </div>
    </template>
    <script>
      import PubSub from 'pubsub-js'
        export default {
            name: "Child_1",
            methods:{
                info_child_2(){
                    PubSub.publish('from_child_1','来自child-1的消息数据')
                }
            }
        }
    </script>
    <style scoped>
    </style>

组件二：Child\_2.vue

<template>
        <div>
          <p>child-2 组件</p>
          <p>{
       {message}}</p>
        </div>
    </template>
    <script>
      import PubSub from 'pubsub-js'
        export default {
            name: "Child_2",
            data(){
                return{
                    message:''
                }
            },
            mounted() {
                PubSub.subscribe('from_child_1',(msg,data)=> {
                    this.message=data
                })
            }
        }
    </script>
    <style scoped>
    </style>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70][]

### 4.  vue兄弟组件之间通信--eventBus ###

[https://juejin.im/post/5d035f6b6fb9a07f0052d7de\#comment][https_juejin.im_post_5d035f6b6fb9a07f0052d7de_comment]

### 5.  vuex ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]: /images/20230531/e05d49a48e034f3bbb943f93e3dbb10e.png
[https_juejin.im_post_5d035f6b6fb9a07f0052d7de_comment]: https://juejin.im/post/5d035f6b6fb9a07f0052d7de#comment