从父组件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 }}