美文网首页Vue
Vue 父子组件、兄弟组件传值

Vue 父子组件、兄弟组件传值

作者: 别吵让我睡觉 | 来源:发表于2021-02-05 09:56 被阅读0次

    题记

    一直想总结这方面的知识,恰好上周又用到了,所以直接一次性总结了😀

    我的理解

    对于两个页面传值,我之前的理解一直停留在第一个页面跳转到第二个页面,作为参数携带过去的某些值。后来涉及到两个页面互相传值,就有点难受了,然后查了下,发现了父子、兄弟组件。其中的兄弟组件用的比较多。


    父子组件传值

    父组件结构样例
    <template>
      <div>
        <h1>父组件</h1>
        <child></child>
      </div>
    </template>
    <script>
    import child from '@/components/child'
    export default {
      name: 'father',
      components: {
        child
      },
      data() {
        return {
        }
      }
    }
    </script>
    
    子组件结构样例
    <template>
      <div>
        <h1>子组件</h1>
      </div>
    </template>
    <script>
    export default {
      name: 'child',
      data() {
        return {
        }
      },
    }
    </script>
    

    第一种情况:父组件给子组件传值

    关键:子组件通过props获取父组件传来的值

    父组件结构
    <template>
      <div>
        <h1>父组件</h1>
        <child :sendMessage="fatherMessage"></child>
      </div>
    </template>
    <script>
    import child from '@/components/child'
    export default {
      name: 'father',
      components: {
        child
      },
      data() {
        return {
          fatherMessage: 'hello,my son' // 传递给子组件的值
        }
      }
    }
    </script>
    
    子组件结构
    <template>
      <div>
        <h1>子组件</h1>
        <span>获取父组件的值:{{sendMessage}}</span> 
      </div>
    </template>
    <script>
    export default {
      name: 'child',
      data() {
        return {
        }
      },
      props: ['sendMessage'] // 拿到父组件的值绑定到sendMessage,然后在子组件下显示出来
    }
    </script>
    

    第二种情况:子组件给父组件传值

    关键:
    子组件通过触发事件$emit给父组件传值
    父组件通过v-on:监听子组件的状态

    子组件结构
    <template>
      <div>
        <h1>子组件</h1>
        <button @click="sendToFather">子组件给父组件传值</button>
      </div>
    </template>
    <script>
    export default {
      name: 'child',
      data() {
        return {
          childMessage: 'hello,my father'
        }
      },
      methods: {
        sendToFather: function() {
          // 参数1 getChildValue作为中间状态,参数2 this.childMsg即为传递给父组件的数据
          this.$emit('getChildValue', this.childMessage);
        }
      }
    }
    </script>
    
    父组件结构
    <template>
      <div>
        <h1>父组件</h1>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态,然后通过getChild方法获取子组件传递的数据-->
        <child v-on:getChildValue="getChild"></child>
        <span>这是来自子组件的数据:{{childValue}}</span>
      </div>
    </template>
    <script>
    import child from '@/components/child'
    export default {
      name: 'father',
      components: {
        child
      },
      data() {
        return {
          childValue: ''
        }
      },
      methods: {
        getChild: function(data) {
          // 此时的参数data为子组件传递的值,即this.$emit()的第二个参数
          this.childValue = data;
        }
      }
    }
    </script>
    

    兄弟组件传值

    原理:这个也可以称为同级组件之间的传值。思路就是通过一个中间桥来进行传值,它承担起了组件之间通信的桥梁,也就是中央事件总线,推荐直接使用vuex进行状态管理会比较方便。

    关键:
    第一个组件通过中间桥将信息暴露出去
    第二个组件通过中间桥监听暴露事件,然后通过回调函数获取信息

    步骤

    1.创建一个中间事件总线(在某个文件夹下面创建一个.js文件)
    import Vue from 'vue'
    export default new Vue()
    
    2.第一个组件
    <template>
      <div>
        <p>第一个组件</p>
        <button @click="sendMsg">向第二个组件发送信息</button>
      </div>
    </template>
    <script>
    // 导入中间桥
    import bridge from '../tools/center'
    export default {
      data () {
        return {}
      },
      methods: {
        sendMsg () {
          bridge.$emit('firstMsg', 'hello,my partner')
        }
      }
    }
    </script>
    
    3.第二个组件
    <template>
      <div>
        <p>第二个组件</p>
        <p>从同级组件传递过来的信息:{{message}}</p>
      </div>
    </template>
    <script>
    // 导入中间桥
    import bridge from '../tools/center'
    export default {
      data () {
        return {
          message: '默认值'
        }
      },
      mounted () {
        let _this = this
        bridge.$on('firstMsg', function (msg) {
          _this.message = msg
        })
      }
    }
    </script>
    

    参考文章:https://www.cnblogs.com/secretAngel/p/9705809.html

    相关文章

      网友评论

        本文标题:Vue 父子组件、兄弟组件传值

        本文链接:https://www.haomeiwen.com/subject/pogdtltx.html