Vue基础教程（115）组件和组合API之使用prop向子组件传递数据之非prop的属性：深度解析Vue祖传秘方：Prop传数据与非Prop属性的神操作！-优快云博客

一、开篇：组件传值，你以为的VS实际上的

嘿，Vue新手村的勇士们！刚撸完数据绑定和事件处理，是不是觉得Vue也就那样？结果一碰到组件传数据，直接懵逼——父组件想给子组件塞点数据，比给叛逆期儿子零花钱还难！

别慌，今天咱就掰扯清楚Vue两大传值神技：prop（官方指定快递员）和非prop属性（天降神秘包裹）。保证让你从“这是啥玩意儿”升级到“哎呀真香”！

先剧透个真实场景：你写了个超帅的按钮组件<fancy-button>，想让它自适应父组件给的class和style，就像乐高随便拼。用prop得一个个声明累死，但非prop属性直接白嫖——就问你香不香？

二、Prop篇：父子组件传值的“官方认证通道”

2.1 Prop是啥？能吃吗？

Prop说白了就是父组件给子组件递小纸条的合法渠道。比如你妈（父组件）让你（子组件）去买酱油，总得告诉你牌子、多少钱吧？这就是prop！

语法超简单：

子组件里声明prop（等收快递）
父组件绑定属性（发快递）

2.2 实战代码：手把手搭个“传话游戏”

来，整个活！我们搞个ChildComponent，让父组件告诉它今天吃什么。

子组件（收件方）：

<template>
  <div class="child">
    <h3>我是子组件，今天吃：{
  
  { food }}！</h3>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  props: ['food'] // 声明要接收的prop
}
</script>

父组件（发货方）：

<template>
  <div class="parent">
    <h2>我是父组件，负责点菜</h2>
    <ChildComponent food="红烧肉" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent }
}
</script>

看，父组件一句food="红烧肉"，子组件立马显示