vue的父子、兄弟组件传值（附演示代码）

vue的组件传值

• 父组件向子组件传值（数据绑定+props）

  • 父组件的操作：在父组件里引入子组件，在子组件的标签上通过v-model进行数据绑定。父组件的示例代码如下

  <template>
    <div class="home">
      <p>Home</p>
      <son :name='val'></son>
    </div>
  </template>
  
  <script>
  import Son from './../components/Son'
  
  export default {
    name: 'Home',
    components: {
      Son
    },
     created() {
    },
    data() {
      return {
        val: 'wyms'
      }
    },
    methods: {
    },
  }
  </script>
  

  • 子组件的操作：当父组件设置好后，子组件通过props接受父组件传递过来的消息。在props中可以设置接收参数的属性和没有参数传入时候的默认值。

  <template>
      <div id="son">
         子组件： {{name}}
      </div>
  </template>
  
  <script>
  export default {
      name: 'son',
      props: {
        name: {
          type: String,
          default: 'name为空时候的默认值'
        }
      },
      created() {
      },
      data() {
          return {
              son: '子组件的值s'
          }
      },
      methods: {
      },
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>
  

  此时页面的显示如下图所示（父组件有参数传入）：

  

  此时页面的显示如下图所示（父组件无参数传入）：

• 父组件向子组件传值（v-ref）

  • 父组件可以调用子组件中的方法，通过调用子组件的方法将父组件的数据传到子组件。

    <template>
      <div class="home">
        <p>Home</p>
        <son ref='sons'></son>
      </div>
    </template>
    
    <script>
    import Son from './../components/Son'
    
    export default {
      name: 'Home',
      components: {
        Son
      },
       mounted () {
        this.$refs.sons.postData(this.val);
      },
      data() {
        return {
          val: 'v-if的父子传值方法'
        }
      },
      methods: {
      },
    }
    </script>
    

  • 子组件可以定义一个方法来接收父组件传递过来的参数。

    <template>
        <div id="son">
           子组件： {{name}}
        </div>
    </template>
    
    <script>
    export default {
        name: 'son',
        created() {
        },
        data() {
            return {
                name: '',
            }
        },
        methods: {
          // 定义一个方法让父组件调用，从而接收父组件传递的参数
          postData (val) {
              this.name = val;
            }
        },
    }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    

    这样经过这种方法，父组件还是可以实现向子组件传值：

    

• 子组件向父组件传值（$emit发送事件）

  • 子组件通过$emit将事件携带参数发送出去：

  <template>
      <div id="son">
         子组件： {{name}}
      </div>
  </template>
  
  <script>
  export default {
      name: 'son',
      created() {
        this.$emit('postVal', this.son);
      },
      data() {
          return {
              son: '子组件传递出去的值',
          }
      },
      methods: {
        // 定义一个方法让父组件调用，从而接收父组件传递的参数
        postData (val) {
            this.name = val;
          }
      },
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>
  

  • 父组件通过自定义事件进行接收，获取子组件传递过来的数据

    <template>
      <div class="home">
        <p>Home</p>
        <son @postVal="getVal"></son>
      </div>
    </template>
    
    <script>
    import Son from './../components/Son'
    
    export default {
      name: 'Home',
      components: {
        Son
      },
      data() {
        return {
        }
      },
      methods: {
        getVal(res) {
          console.log('子组件传递的值为：' + res);
        },
      },
    }
    </script>
    

    最终得到的结果为：

    

• 子组件调用父组件的方法：this.$parent.event // event父组件中的事件，通过event将参数传递过去，具体和父组件调用子组件的事件类似。

• 兄弟组件传值（EventBus）

  兄弟组件顾名思义就是同级的组件，有着共同的父组件，当他们进行传值时就需要有一个共同的vue实例当做中转。你可以在根目录下创建一个js文件，创建并且导出一个新的vue实例。

  import Vue from 'vue';
  let EventBus = new Vue();
  export default EventBus;
  

  然后在需要进行传值的兄弟组件内进行引入。

  发送数据的组件，具体代码如下所示：

  <template>
      <div id="demo">
          <button @click="change('demo的演示数据')">demo的按钮</button>
      </div>
  </template>
  
  <script>
  import EventBus from '../../EventBus'
  
  export default {
      name: 'demo',
      data() {
          return {
            val: 'wym'
          }
      },
      methods: {
        change (mes) {
          EventBus.$emit('change', mes);
          console.log(`现在demo发出去的值为：${mes}`);
        }
      },
  }
  </script>
  
  <style lang="scss" scoped>
  .active {
      color: aqua;
      font-size: 25px;
  }
  </style>
  

  接收数据的组件，需要用EventBus.$on(eventName, function);进行接收

<template>
    <div id="son">
       子组件： {{name}}
    </div>
</template>

<script>
import EventBus from '../../EventBus'

export default {
    name: 'son',
    created() {
        EventBus.$on('change', function (val) {
          console.log(`现在son组件接收到了demo的的信息：${val}`)
        });
    },
    data() {
        return {
            son: '子组件传递出去的值',
            name: '',
        }
    },
}
</script>

<style lang="less" scoped>
img {
  width: 20px;
  height: 20px;
}
</style>

引入两组件并且挂载到父组件：

<template>
  <div class="home">
    <p>Home</p>
    <demo></demo>
    <son></son>
  </div>
</template>

<script>

import Son from './../components/Son'
import Demo from '../views/Demo.vue'

export default {
  name: 'Home',
  components: {
    Son,
    Demo
  },
   created() {
  },
  mounted () {
  },
  data() {
    return {
    }
  },
  methods: {
  },
}
</script>

点击发送事件的按钮，结果如下：