Vue父组件与子组件之间数据的互传

子组件向父组件传值

1. 子组件

<script>
...
  methods:{
    send:function(){
      this.$emit('doSomething', this.xxx)
      // 通过 $emit 将子组件变量传给父组件，doSomething（自定义的）函数在父组件中定义
    }
  }
...
</script>

2. 父组件

<template>
  <!-- 定义子组件传（$emit）出来的函数-->
  <child v-on:doSomething="myDoSomething"></child>
</template>

<script>
...
  methods: {
    // 实现子组件提供的函数，获取子组件的变量
    myDoSomething: function(value){
      console.log(value);
    }
  }
...
</script>

父组件向子组件传值

1. 子组件

<script>
...
  // 子组件通过 props 将变量与父组件关联
  props: {
    name: {
      type: String,
      default:'no name'
    }
  }
...
</script>

2. 父组件

<template>
  <!-- :xxx（即 v-bind:xxx），将子组件props中的变量 与 父组件定义的变量 关联/绑定 -->
  <child :name="myName"></child>
</template>
<script>
...
  data(){
    return{
      // 设置绑定数据
      myName:'请输入...'
    }
  }
...
</script>

• 分类： Vue 前端开发
• 标签： vue