美文网首页
Vue:props&data、单向数据流

Vue:props&data、单向数据流

作者: 家乡的蝈蝈 | 来源:发表于2024-03-28 11:08 被阅读0次

    1.共同点

    都可以给组件提供数据

    2.区别

    • data 的数据是自己的 → 随便改
    • prop 的数据是外部的 → 不能直接改,要遵循 单向数据流

    3.单向数据流:

    父级props 的数据更新,会向下流动,影响子组件。这个数据流动是单向的

    4.代码演示

    <template>
      <div class="base-count">
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
      </div>
    </template>
    
    <script>
    export default {
      // 1.自己的数据随便修改  (谁的数据 谁负责)
       data () {
         return {
           count: 100,
         }
       },
      // 2.外部传过来的数据 不能随便修改
      //props: {
      //  count: {
      //    type: Number,
      //  }, 
      //}
    }
    </script>
    

    相关文章

      网友评论

          本文标题:Vue:props&data、单向数据流

          本文链接:https://www.haomeiwen.com/subject/usaytjtx.html