Vue - 非父子组件之间传值

た入场券 2021-09-01 12:18 587阅读 0赞

# 非父子组件之间传值有两种方式： #

## 一. Vuex ##

[https://blog.csdn.net/Jie\_1997/article/details/107228246][https_blog.csdn.net_Jie_1997_article_details_107228246]

## 二. Bus ##

*  也可说是 **总线机制**、**发布订阅模式**、**观察者模式**

1.  `main.js` 中 new 一个 Vue 的**实例**，挂载在 `bus` 属性上
    
    `Vue.prototype.bus=new Vue()`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]
2.  **传值组件**：通过 `$emit` 方法触发事件，同时携带内容  
    ![在这里插入图片描述][20200804161238936.png]
    
        methods: {
         handleClick(){
            this.bus.$emit('change','传递成功！')
          }
        },
3.  **接收值组件**：在 `mounted` 中监听 **bus** 的改变，通过 `$on` 方法监听 **bus** 上的事件，接收传递回来的值  
    ![在这里插入图片描述][20200804162423310.png]
    
        mounted() {
          var this_=this
          this.bus.$on('change',function(msg){
            console.log(msg)
          })
        },

### 一个通过 `bus` 方法非父子组件传值的实例，这里为兄弟组件之间传值： ###

*  **父组件：**
    
        <template>
          
          <div>
            <h3>父组件</h3>
            <hr/>
            <child-one></child-one>
            <hr/>
            <child-two></child-two>
          </div>
        </template>
        <script>
        //此处子组件地址仅供参考
        import childOne from "./childOne.vue";
        import childTwo from "./childTwo.vue";
        export default {
          data() {
            return {
            };
          },
          components: {
            childOne,
            childTwo,
          },
          mounted() {},
          methods: {},
        };
        </script>
        <style scoped>
        </style>
 *  **第一个子组件（传值组件）：**
    
        <template>
          <div>
            <button @click="handleClick">传递值</button>
          </div>
        </template>
        <script>
        export default {
          data() {
            return {};
          },
          methods: {
            handleClick(){
              //实例上挂在的 bus, 通过 $emit 方法触发事件，同时携带传递的内容
              this.bus.$emit('change','传递成功！')
            }
          },
        };
        </script>
        <style scoped>
        </style>
 *  **第二个子组件（接收值组件）：**
    
        <template>
          <div>
            <h3>第二个子组件</h3>
            <p>接收的数据：{
             {data}}</p>
          </div>
        </template>
        <script>
        export default {
          data() {
            return {
              data:''
            };
          },
          //在 mounted 中监听 bus 的改变
          mounted() {
            //保存 this 作用域
            var this_ = this
            //实例上挂在的 bus，通过 $on 监听 bus 上的事件，接收传递回来的值
            this.bus.$on('change',function(msg){
              this_.data = msg
            })
          },
          methods: {},
        };
        </script>
        <style scoped>
        </style>

[https_blog.csdn.net_Jie_1997_article_details_107228246]: https://blog.csdn.net/Jie_1997/article/details/107228246
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/cd946b749b184aabb6f1392d6cc516cd.png
[20200804161238936.png]: /images/20210725/d76070c66d564053a1574af041e9169f.png
[20200804162423310.png]: /images/20210725/e349581df7dd4726a3a8b8e162b2edd8.png