vue 父组件传子组件是对象和值

Vue 父组件传递给子组件的可以是对象或者值。下面是两种常见的传递方式：

1. 通过属性绑定传递值：
父组件可以通过在子组件上绑定属性来传递值。例如，父组件中的数据可以通过属性绑定传递给子组件：

<template>
  <div>
    <child-component :data="obj"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      obj: { name: 'John', age: 25 }
    };
  }
};
</script>

在子组件中，可以通过 `props` 接收父组件传递的值：

<template>
  <div>
    <p>Name: {{ data.name }}</p>
    <p>Age: {{ data.age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    data: Object
  }
};
</script>

2. 通过插槽传递内容：
父组件可以通过插槽来传递包含任意内容的子组件。例如，父组件可以在子组件的标签内放置其他 HTML 或组件，并将其作为插槽内容传递给子组件：

<template>
  <div>
    <child-component>
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
    </child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      title: 'Welcome',
      content: 'This is the content'
    };
  }
};
</script>

在子组件中，可以通过 `slot` 来获取插槽内容：

<template>
  <div>
    <slot></slot>
  </div>
</template>

这样，子组件就可以渲染父组件传递的内容了。