vue.js基础中父子组件之间的传值

在Vue.js中，父子组件之间的传值可以通过props进行父->子的传值，通过自定义事件进行子->父的传值。

父组件传值给子组件：

<!-- 父组件 -->
<template>
  <div>
    <child-component :parent-msg="message"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    }
  }
}
</script>

子组件接收父组件的值：

<!-- 子组件 -->
<template>
  <div>
    {{ parentMsg }}
  </div>
</template>
 
<script>
export default {
  props: {
    parentMsg: String
  }
}
</script>

子组件传值给父组件：

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('child-to-parent', 'Hello from child');
    }
  }
}
</script>

父组件监听子组件的事件：

<!-- 父组件 -->
<template>
  <div>
    <child-component @child-to-parent="receiveFromChild"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveFromChild(msg) {
      console.log(msg); // 输出：Hello from child
    }
  }
}
</script>

以上代码展示了父子组件之间如何通过props和自定义事件进行数据传递的基本用法。