P14. vue3 向子组件传值 Prop

从父组件Content向子组件Hello_kugou传递数据

• App.vue

<script>
  import Content from "./components/Content.vue";
  export default {
    data() {
      return {

      };
    },
    components:{
      Content
    }
  }

</script>

<template>
  <div>
    <Content></Content>

  </div>

</template>

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <Hello_kugou :message="msg" static="123"></Hello_kugou>
    <h3>{{msg}}</h3>
    <button @click="msg='酷狗'"> chagebut</button>

  </div>
</template>

<script>
const obj={
  msg:"hello---kugou"
}

import Hello_kugou from "./Hello_kugou.vue";
export default {
  data(){//让每一个组件对象都返回一个对象，不对数据污染
    return{
      msg: 'hellokugoumsg'
    };
  },
  components:{
    Hello_kugou
  },
  name: "Content"
}
</script>

<style scoped>

</style>

• Hello_kugou.vue

<template>
  <div>
    <h2>hello kugou</h2>
    <h2>{{message}}--调用父组件的变量</h2>
    <h2>{{static}}--调用父组件的静态变量</h2>
  </div>
</template>

<script>
export default {
  name: "Hello_kugou",
  props: ['message', 'static']
}
</script>

<style scoped>

</style>

• 静态变量

Prop 类型

到这里，我们只看到了以字符串数组形式列出的 prop：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。你会在这个页面接下来的部分看到类型检查和其它 prop 验证。

prop 类型限制

• Content.vue

  <template>
  <div>
    <!--组件是可以复用 -->
    <Hello_kugou :message="msg" static=56></Hello_kugou>
    <h3>{{msg}}</h3>
    <button @click="msg='酷狗'"> chagebut</button>
  
  </div>
  </template>
  
  <script>
  const obj={
  msg:"hello---kugou"
  }
  
  import Hello_kugou from "./Hello_kugou.vue";
  export default {
  data(){//让每一个组件对象都返回一个对象，不对数据污染
    return{
      msg: 'hellokugoumsg'
    };
  },
  components:{
    Hello_kugou
  },
  name: "Content"
  }
  </script>
  
  <style scoped>
  
  </style>

• Hello_kugou.vue

<template>
  <div>
    <h2>hello kugou</h2>
    <h2>{{message}}--调用父组件的变量</h2>
    <h2>{{static}}--调用父组件的静态变量</h2>
  </div>
</template>

<script>
export default {
  name: "Hello_kugou",
  //props: ['message', 'static']
  props:{
    message: String,
    static: String
  }
}
</script>

<style scoped>

</style>

prop 默认值

• Hello_kugou.vue

<template>
  <div>
    <h2>hello kugou</h2>
    <h2>{{message2}}--调用父组件的变量</h2>
    <h2>{{static}}--调用父组件的静态变量</h2>
  </div>
</template>

<script>
export default {
  name: "Hello_kugou",
  //props: ['message', 'static']
  props:{
    // message: String,//类型限制
    // static: String
    message2:{
      type:String,
      default:"nihhaokugou",
      required:true
    }
  }
}
</script>

<style scoped>

</style>

• required:true 必须传值
  

数组，对象情况p

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <Hello_kugou :message="msg" static=56 :list="list"></Hello_kugou>
    <h3>{{msg}}</h3>
    <button @click="msg='酷狗'"> chagebut</button>

  </div>
</template>

<script>
const obj={
  msg:"hello---kugou"
}

import Hello_kugou from "./Hello_kugou.vue";
export default {
  data(){//让每一个组件对象都返回一个对象，不对数据污染
    return{
      msg: 'hellokugoumsg',
      list: [1,2,3]
    };
  },
  components:{
    Hello_kugou
  },
  name: "Content"
}
</script>

<style scoped>

</style>

• Hello_kugou.vue

<template>
  <div>
    <h2>hello kugou</h2>
    <h2>{{message2}}--调用父组件的变量</h2>
    <h2>{{static}}--调用父组件的静态变量</h2>
  </div>
</template>

<script>
export default {
  name: "Hello_kugou",
  //props: ['message', 'static']
  props:{
    // message: String,//类型限制
    // static: String
    message2:{
      type:String,
      default:"nihhaokugou",
      required:true
    },
    list:{
      type:Array,
      default(){
        return []
      }
    }
  }
}
</script>

<style scoped>

</style>

单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图变更一个 prop 的情形：

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}