Vue 组件传值有两种主要方法：使用 Props 传递明确定义的数据，或者使用插槽传递动态或复杂的内容。Props 严格类型检查和代码可重用，而插槽更灵活。
Vue 组件传值方法
Vue 中组件传值有两种主要方法：
1. Props
(a) 父组件传递 Props 给子组件
立即学习“前端免费学习笔记（深入）”；
- 在父组件中，使用
props属性定义要传递给子组件的数据。 - 例如：
<code class="html"><template> <child :message="someData"></child> </template></code>
-
:message是一个道具名称，someData是要传递的数据。
(b) 子组件接收 Props
- 在子组件中，使用
props选项来定义可以接收的 Props。 - 例如：
<code class="javascript">export default {
props: ['message'] // 接收名为 'message' 的道具
}</code>2. 插槽
(a) 父组件向插槽传递内容
- 在父组件中，使用
<slot>标签包裹要传递的内容，并使用name属性指定插槽名称。 - 例如：
<code class="html"><template>
<child>
<span>我是传递给槽的内容</span>
</child>
</template></code>-
child组件中的name为default的插槽将接收此内容。
(b) 子组件接收插槽内容
- 在子组件中，使用
<slot>标签来接收从父组件传递的内容。 - 例如：
<code class="html"><template>
<div>
<slot name="default"></slot>
</div>
</template></code>- 子组件将显示父组件传递的内容。
比较
- Props 适合传递明确定义的数据，而槽适合传递动态或复杂的内容。
- Props 提供更强的类型检查和代码可重用性，而插槽提供了更大的灵活性。
