乐趣区

关于vue.js:P14-vue3-向子组件传值-Prop

jiezi

从父组件 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}
}
退出移动版