Vue中如何向子组件传递属性？

在Vue.js中，向子组件传递属性主要有两种方式：直接属性（Props）和自关联引用（ref）。

**1. Props (属性):**
- **父组件向子组件传递**: 使用`props`标签定义，将父组件的数据作为属性传递给子组件。例如：

<child-component :prop1="value1" :prop2="value2"></child-component>

在这里，`:prop1`和`:prop2`就是父组件向子组件传递的属性，而`value1`和`value2`则是它们的值。

- **子组件接收**: 子组件需要通过`props`选项声明来接收这些属性，并在模板中使用它们。同时，还可以添加默认值、命名空间等特性。

import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      value1: 'parent prop',
      value2: 42,
    };
  },
};

**2. Ref (引用):**
- **父组件创建子组件实例**: 使用`ref`来创建对子组件实例的引用，允许你在父组件中直接操作子组件。

<child-component ref="childRef"></child-component>

- **父组件访问子组件**: 可以通过`this.$refs.childRef`来访问子组件实例，然后调用其提供的API或者直接修改其数据。

methods: {
  someMethod() {
    this.$refs.childRef.someFunction();
  }
}

这两种方式通常结合使用，props用于数据向下传递，而ref则用于组件的交互控制。