vue-15-父传子-复习

所有的 props 遵循着 单向绑定 原则， props 因父组件的更新而变化，自然地将新的状态发送给子组件，并且不会逆向传递。这避免了子组件意外修改父组件的状态的情况，避免数据流变得混乱而难以理解。

父组件：App.vue

<template>
  <div>
    <!-- <Navbar title="首页" left="返回" right="首页"></Navbar> -->
    <!-- <Navbar v-bind="{
      title:'电影',
      left:'返回' ,
      right:'首页'
    }"></Navbar> -->

    <Navbar v-bind="propobj"></Navbar>

  </div>
</template>

<script>
 import Navbar from './Navbar.vue'

    export default {
        data(){
          return {
               propobj:{
               title:'电影',
               left:'返回' ,
                right:'首页'
               }

             }
        },

        components:{
               Navbar,
        }

    }

</script>

<style lang="scss" scoped>

</style>

子组件：Navbar.vue

<template>
  <div>
    <button>{{ left }}</button>
      navbar--{{ title }}
    <button>{{ right }}</button>

  </div>
</template>

<script>
export default {
  // 接收
 props:['title','left','right']
}
</script>

<style lang="scss" scoped>

</style>

---

运行截图：

---

当每次父组件更新后，子组件中的 props 都会被更新到最新值，但是 不应该 在子组件中直接去更改一 个 prop，后果就是报错；

如果在子组件中改一下父组件传来的值：可以使用计算属性或者赋值给属性再进行改造

---

父组件:

<template>
  <div>
    <Navbar :my-title="title" left="返回" right="首页"></Navbar>

    <button @click="handleClick">父组件这边</button>

  </div>
</template>

<script>
 import Navbar from './Navbar.vue'

export default {

data(){
  return {
    title:'首页状态',
  
  }
},

methods: {
  handleClick(){
    this.title="点了父组件-首页状态变123"
  }
},

 components:{
  Navbar,
}

}

</script>

<style lang="scss" scoped>

</style>

子组件：

<template>
  <div>
    <!-- 点击父组件按钮，页面改变 即父改变 子也改变 -->
    <button>{{ left }}</button>
      navbar--{{ myTitle }}
    <button @click="handleRight">{{ right }}</button>
   
    <br>
    <br>
    
    <!--父传递过来的参数被子组件赋值改变 -->
    <button>{{ left }}</button>
      navbar--{{ name }}
    <button @click="handleRight">{{ right }}</button>
    
    <br>
    <br>

    <!-- 父传递过来的参数被子组件的计算属性改变 -->
    <button>{{ left }}</button>
      navbar--{{ computedTitle }}
    <button @click="handleRight">{{ right }}</button>
    

  </div>
</template>

<script>
export default {

  data(){
    return{
      name:'asd'
    }
  },

  // 接收
 props:['myTitle','left','right'],

 methods:{
  handleRight(){
    // this.myTitle='子想改父传来的属性-->改不了，报错'
    this.name=this.myTitle+'赋值'
  }
 },

//  使用计算属性改父组件传递的参数 二次加工
computed:{
  computedTitle(){
    return this.myTitle + '变'
  }
}

}
</script>

<style lang="scss" scoped>

</style>

点击按钮前截图：

点击按钮后截图：

---

简而言之就是两个点

1、父变子变，视图更新

 2、子不可以直接改父的参数，但是可以通过别的途径去改变，如计算属性，赋值等