组件之间传值

电玩女神 2024-02-05 13:52 4阅读 0赞

**目录**

1：组件中的关系

2：父向子传值

3：子组件向父组件共享数据

4：兄弟组件数据共享

--------------------

### 1：组件中的关系 ###

在项目中使用到的组件关系最常用两种是，**父子关系，兄弟关系**

![a99822318b184377a83c0d3f1dcc321f.png][]

例如A组件使用B组件或者C组件或者BC组件都使用了，那么A组件就是BC组件的父，BC组件是A组件的子，BC组件就是兄弟关系。

### 2：父向子传值 ###

父子组件之间的数据共享

**一个组件（父）中导入了两外一个组件（子）使用自定义属性，定义props在子组件中，共享数据**![396e065b206d499b8ffe68387486dd07.png][]

在App.vue组件中使用Left组件，父组件向子组件传值，在父组件中定义需要传的数据，子组件中定义props接收父组件的数据![b42d23c71f6f40bd9bee6ecac3279998.png][]

### 3：子组件向父组件共享数据 ###

![b52971d9b5d94c1f9f4df1c2c9db7d7e.png][]

在子组件中通过$emit函数定义一个事件函数名称和值，在父组件中声明这个方法

子组件示例代码：

<template>
        <div>
            <div class="container">
                <span id="app">你好</span>
                <span>计数：{
       { count }}</span>
                <button @click="add">+1</button>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        name: 'WORKSPACE_NAMEaa',
        props:['init'],
        data() {
            return {
                message:'Hello',
                count:1
            };
        },
    
        mounted() {
            console.info('tag', document.getElementById('app').style.color='red')
        },
    
        methods: {
            add(){
                this.count = this.count +1
                this.$emit('countchange', this.count);
            },
            show(){
                console.info('调用了show方法')
            }
        },
        created(){
            console.info(this.show)
            console.info(this.message)
            console.info(this.init)
        },
        updated(){
    
        },
        beforeUpdate(){
    
        }
    };
    </script>
    
    <style lang="less" scoped>
     .container{
         background: goldenrod;
         width: 300px;
         height: 300px;
         border: 1px solid black
     }
    </style>

父组件示例代码：

<template>
      <div>
        <div class="footer_wrap">
          <router-link to="/find">发现音乐</router-link>
          <router-link to="/my">我的音乐</router-link>
          <router-link to="/friend">朋友</router-link>
        </div>
        <!-- <CCC init='你好' @countchange="getNewCount"></CCC>
      </div>
    </template>
    
    <script>
    
    import testMyTag from '@/views/商品案例/MyTag.vue'
    import testMyTable from '@/views/商品案例/MyTable.vue'
    import houbeiMyDialog from '@/views/后备插槽/MyDialog.vue'
    import MyDialog from '@/views/默认插槽/MyDialog.vue'
    import MyTable from '@/views/作用域插槽/MyTable.vue'
    import testMyDialog from '@/views/具名插槽/MyDialog.vue'
    import testnexttick from '@/views/TestnextTick.vue'
    import BaseFrom from '@/views/BaseFrom.vue'
    import BaseChart from '@/views/BaseChart.vue'
    import AAA from '@/views/Left.vue'
    import BBB from '@/views/Right.vue'
    import CCC from '@/views/aa.vue'
    export default {
      // components:{
      //   AAA,BBB,CCC,BaseChart,BaseFrom,testnexttick,testMyDialog,MyTable,MyDialog,houbeiMyDialog,testMyTag,testMyTable
      // },
      data(){
        return{
            countvalue:0
        }
      },
      methods: {
         getNewCount(val){
           this.countvalue = val
         }
      },
    }
    </script>
    
    <style lang="less" scoped>
    .footer_wrap a.router-link-exact-active{
      background-color: #007acc;
    }
    body {
      margin: 0px;
    }
    .footer_wrap {
      position: relative;
      left: 0;
      top: 0;
      display: flex;
      width: 100%;
      text-align: center;
      background-color: #333;
      color: #ccc;
    }
    .footer_wrap a {
      flex: 1;
      text-decoration: none;
      padding: 20px 0;
      line-height: 20px;
      background-color: #333;
      color: #ccc;
      border: 1px solid black;
    }
    .footer_wrap a:hover {
      background-color: #555;
    }
    </style>

### 4：兄弟组件数据共享 ###

在vue2.x中，兄弟组件数据共享的方案EventBus

![ca174677da714eaeb6cd840eccd98a0a.png][]

![3dc10bc4f4bd48f1b1b95cbbb537b890.png][] ![9eddb38f782d49a5942ea98829103243.png][]

[a99822318b184377a83c0d3f1dcc321f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/1f14acaa221b4933bb59a82f26ab8114.png
[396e065b206d499b8ffe68387486dd07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/b09bb3e3002742a38ffd36dc0d568a9a.png
[b42d23c71f6f40bd9bee6ecac3279998.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/33bb3796ee7e4e809c18d23c277f7193.png
[b52971d9b5d94c1f9f4df1c2c9db7d7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/7394a27d5d40435d8c1377b0eabbf20c.png
[ca174677da714eaeb6cd840eccd98a0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/ee9822c2d8714499bc89bdb1de01bdba.png
[3dc10bc4f4bd48f1b1b95cbbb537b890.png]: https://img-blog.csdnimg.cn/direct/3dc10bc4f4bd48f1b1b95cbbb537b890.png
[9eddb38f782d49a5942ea98829103243.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/f6e1d1d4772a41b2b489d8221c17a664.png