vue怎么实现父子组件传值

在Vue中，父子组件之间的传值主要通过props和事件（$emit）来实现。

父组件向子组件传值：

在父组件中，你可以通过在子组件标签上添加自定义属性（即props）来传递数据给子组件。然后在子组件中，你可以通过this.$props或者直接在模板中使用这些props来访问这些数据。

下面是一个简单的例子：

父组件：

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

子组件：

<template>  
  <div>{{ message }}</div>  
</template>  
  
<script>  
export default {  
  props: {  
    message: String  
  }  
}  
</script>

在这个例子中，父组件将parentMessage这个数据通过:message这个prop传递给了子组件。子组件通过props选项声明了message这个prop，然后在模板中直接使用{{ message }}来显示这个数据。

子组件向父组件传值：

子组件可以通过触发事件（$emit）来向父组件传递数据。父组件可以通过监听这个事件来获取子组件传递的数据。

下面是一个简单的例子：

子组件：

<template>  
  <button @click="notifyParent">Notify Parent</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    notifyParent() {  
      this.$emit('childEvent', 'Hello from child!');  
    }  
  }  
}  
</script>

父组件：

<template>  
  <div>  
    <child-component @childEvent="handleChildEvent"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue'  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleChildEvent(message) {  
      console.log(message); // 输出 'Hello from child!'  
    }  
  }  
}  
</script>

在这个例子中，子组件有一个按钮，当点击这个按钮时，会触发notifyParent这个方法。这个方法通过this.$emit触发了一个名为childEvent的事件，并传递了一个字符串'Hello from child!'作为参数。父组件通过@childEvent监听了这个事件，并定义了一个handleChildEvent方法来处理这个事件。当子组件触发childEvent事件时，父组件的handleChildEvent方法就会被调用，并接收到子组件传递的数据。