Vue基础教程（113）组件和组合API之使用prop向子组件传递数据之单向数据流：当父爱如山：Vue的Prop单向数据流，想说叛逆不容易！-优快云博客

父组件传数据就像老爸给零花钱，给你就是你的，但想改老爸钱包？门儿都没有！

作为一名Vue开发者，你是否曾对着子组件想修改父组件传来的数据却屡屡碰壁？那个红色的警告是否曾让你抓狂：“不要直接修改prop！”别急，这不是Vue在故意刁难你，而是它在用“单向数据流”这座大山保护你的代码不被搞得一团糟。

今天，就让我们一起揭开这层神秘面纱，看看这个看似严苛的规则背后，藏着怎样的良苦用心。

什么是单向数据流？一个家庭零花钱的完美比喻

想象一下，父组件就像你的老爸，他每个月会固定给你一笔零花钱（这就是prop）。你可以自由支配这笔钱（在子组件内使用），但你想偷偷修改老爸银行卡上的余额（直接修改prop）？抱歉，这不行，除非你通过撒娇、请求（emit事件）的方式让老爸自己改变主意。

这就是Vue中著名的单向数据流原则：prop因父组件的更新而更新，更新后的prop会流向子组件，但不会反向流动。

为什么Vue要这么设计？让我们看一个反面教材：

// 错误示范：子组件内直接修改prop
export default {
  props: ['userName'],
  methods: {
    updateName() {
      this.userName = '王小二' // 控制台警告：哒咩！
    }
  }
}

这种操作之所以被禁止，是因为如果多个子组件都能随意修改父组件的数据，当出现bug时，你就会像在玩“猜猜是谁改了数据”的侦探游戏，追踪数据变化变得异常困难。

组合API下的Prop：当传统遇上现代

在Vue 3的组合API中，使用prop的方式略有不同，但单向数据流的原则依然坚如磐石。

// 组合API中的prop使用
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    userName: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // props是响应式的，但不能直接修改
    console.log(props.userName)
    
    // 下面的代码会引起警告
    // props.userName = '新名字'
    
    return {}
  }
})

注意：在setup函数中，props对象是只读的。尝试修改props会导致警告，就像在选项API中一样。

完整示例：构建一个购物车商品组件

理论说多了容易犯困，让我们通过一个实际的电商场景，看看单向数据流如何在实际项目中发挥作用。

父组件：ProductList.vue

<template>
  <div class="product-list">
    <h2>热门商品</h2>
    <div class="products">
      <ProductItem
        v-for="product in products"
        :key="product.id"
        :product="product"
        @update-quantity="handleQuantityUpdate"
      />
    </div>
    
    <div class="cart-summary">
      总数量: {{ totalQuantity }}
    </div>
  </div>
</template>
<script>
import { ref, computed } from 'vue'
import ProductItem from './ProductItem.vue'

export default {
  components: { ProductItem },
  setup() {
    const products = ref([
      { id: 1, name: 'Vue编程之道', price: 68, quantity: 0 },
      { id: 2, name: 'JavaScript高级程序设计', price: 89, quantity: 0 },
      { id: 3, name: 'CSS世界', price: 59, quantity: 0 }
    ])
    
    const handleQuantityUpdate = (productId, newQuantity) => {
      const product = products.value.find(p => p.id === productId)
      if (product) {
        product.quantity = newQuantity
      }
    }
    
    const totalQuantity = computed(() => {
      return products.value.reduce((sum, product) => sum + product.quantity, 0)
    })
    
    return {
      products,
      handleQuantityUpdate,
      totalQuantity
    }
  }
}
</script>

子组件：ProductItem.vue

<template>
  <div class="product-item">
    <div class="product-info">
      <h3>{{ product.name }}</h3>
      <p class="price">¥{{ product.price }}</p>
    </div>
    
    <div class="quantity-controls">
      <button 
        @click="decreaseQuantity"
        :disabled="localQuantity <= 0"
        class="btn btn-minus"
      >
        -
      </button>
      
      <span class="quantity-display">{{ localQuantity }}</span>
      
      <button 
        @click="increaseQuantity"
        class="btn btn-plus"
      >
        +
      </button>
    </div>
  </div>
</template>
<script>
import { ref, watch, defineComponent } from 'vue'

export default defineComponent({
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  emits: ['update-quantity'],
  
  setup(props, { emit }) {
    // 使用本地数据副本，避免直接修改prop
    const localQuantity = ref(props.product.quantity)
    
    // 监听prop的变化，同步到本地数据
    watch(() => props.product.quantity, (newVal) => {
      localQuantity.value = newVal
    })
    
    const increaseQuantity = () => {
      localQuantity.value += 1
      emit('update-quantity', props.product.id, localQuantity.value)
    }
    
    const decreaseQuantity = () => {
      if (localQuantity.value > 0) {
        localQuantity.value -= 1
        emit('update-quantity', props.product.id, localQuantity.value)
      }
    }
    
    return {
      localQuantity,
      increaseQuantity,
      decreaseQuantity
    }
  }
})
</script>
<style scoped>
.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
}

.btn-plus {
  background-color: #4CAF50;
  color: white;
}

.btn-minus {
  background-color: #f44336;
  color: white;
}

.btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.quantity-display {
  min-width: 30px;
  text-align: center;
  font-weight: bold;
}
</style>

在这个示例中，你可以清晰地看到单向数据流的运作方式：

父到子的数据流：父组件通过prop将商品数据传递给子组件
子到父的通信：子组件通过emit事件通知父组件数据需要更新
数据更新的完整闭环：父组件处理事件，更新自己的数据，然后新的数据再次通过prop流向子组件

什么时候可以"打破"单向数据流？

虽然直接修改prop是大忌，但在某些情况下，我们确实需要在子组件内部操作数据。这时候，正确的做法是：

方案一：使用本地数据副本

setup(props) {
  const localData = ref(props.initialValue)
  
  // 操作localData，不会影响父组件
  return { localData }
}

方案二：使用计算属性（适用于派生数据）

setup(props) {
  const computedData = computed(() => {
    return props.originalData.toUpperCase()
  })
  
  return { computedData }
}

方案三：使用v-model（Vue 3的新语法）

<!-- 父组件 -->
<ChildComponent v-model:title="pageTitle" />

<!-- 子组件 -->
<script>
export default {
  props: ['title'],
  emits: ['update:title'],
  methods: {
    updateTitle(newTitle) {
      this.$emit('update:title', newTitle)
    }
  }
}
</script>