vue2 父子组件传值 举个例子

好的，假设有一个父组件 Parent 和一个子组件 Child，现在需要在 Parent 中传递一个值给 Child，具体步骤如下：

1. 在 Parent 中定义要传递的值，比如：

<template>
  <div>
    <child :msg="message"></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

2. 在 Child 中通过 props 接收传递过来的值，比如：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

这样就完成了父子组件之间的传值，父组件通过在子组件中定义 props，然后把要传递的值绑定到子组件的 props 上实现传值。

相关问题

vue2父子组件传值props默认值

在Vue 2中，父子组件之间的数据传递通常通过`props`（属性）来进行。当从父组件向子组件传递数据时，你可以设置`prop`的默认值，这在父组件并未提供实际值时非常有用。

例如，假设你在父组件有一个名为`childComponent`的子组件，并想给它一个名字作为初始值：

<template>
  <div>
    <child-component :name="parentName" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentName: '默认名称', // 这就是 prop 的默认值
    };
  },
};
</script>

在这个例子中，如果父组件没有显式地传递`name`属性给`childComponent`，那么它的初始值将会是`'默认名称'`。如果传递了值，如`<child-component :name="customName" />`，则会使用`customName`的值，而不是默认值。

vue3 父子组件传值

在Vue3中，父组件向子组件传递值可以使用props属性，子组件通过props来接收传递过来的值。父组件可以通过在子组件的标签上使用冒号(:)的方式将数据传递给子组件，子组件则可以在setup函数中使用toRefs函数来解构接收到的props值。以下是一个示例：

父组件传递方式：

<template>
  <div>
    我是父组件
    <Child :info="parentMsg"></Child>
  </div>
</template>

<script setup>
import Child from './Child'
import {ref} from 'vue'

const parentMsg = ref('父组件传递值是a')
</script>

<style scoped>
</style>

子组件接收方式和使用：

<template>
  <div>
    我是子组件拿到了父组件的值是{{info}}
  </div>
</template>

<script setup>
import {toRefs, defineProps} from 'vue'

const props = defineProps({
  // 子组件接收父组件传递过来的值
  info: String,
})

// 使用父组件传递过来的值
const {info} = toRefs(props)
</script>

<style>
</style>

在这个例子中，父组件通过`:info="parentMsg"`将`parentMsg`的值传递给子组件。在子组件中，使用`defineProps`定义了一个`props`对象，并使用`toRefs`将`props`中的`info`解构出来，以在模板中使用。