vue父组件调用子组件，为子组件传值，prop用法

1.父组件调用子组件

子组件children.vue代码如下:

 <template>
   <div>我是子组件</div>
</template>

父组件parent.vue代码如下：

<template>
  <div>
     <myChild></myChild>
  </div>
</template>
<script>
  import myChild from './child'; //第一步导入子组件
  export default {
            name: 'parent',
            components: {
                myChild
            }, //第二步注册子组件
            data() {
                return {
        
                }
            }
        }
</script>

此时在子组件中的内容会显示在组件中，总结：父组件调用子组件
（1）在父组件中通过import导入子组件。
（2）在父组件中使用components:{}注册子组件。

2.父组件向子组件传值

在子组件中，写入一个动态数据message，然后通过props把数据导出去，为外部父组件调用提供一个接口：

子组件代码如下：

    <template>
        <div>
        我是子组件，显示来自父组件的消息{{message}}
        </div>
    </template>
    <script>
        export default {
            props:["message"],
            data() {
                return {
        
                }
            }
        }
    </script>

在父组件中给message赋值：

      <template>
            <div>
                <myChild :message="mymsg"></myChild>
            </div>
        </template>
        <script>
            import myChild from './child';
            export default {
                name: 'parent',
                components: {
                    myChild
                },
                data() {
                    return {
                        mymsg: '向子组件发送消息：Happy'
                    }
                }
            }
        </script>

在父组件中，在子组件上为:message赋值。
总结，父组件给子组件传值：子组件中要通过props把变量导出来，然后在父组件中使用该变量，为该变量赋值。
注：如果父组件传值为一个静态的值，也需要使用v-bind来告诉vue，v-bind简写为":"

例如：
<myChild v-bind:message="123"></myChild>
简写为：
<myChild :message="123"></myChild>

3.为子组件重命名

在父组件中为子组件重命名，可以在components中为子组件重命名，格式如下：

    <template>
        <div>
            <my-child-newname></my-child-newname>
        </div>
    </template>
    <script>
        import myChild from './child';
        export default {
            name: 'parent',
            components: {
                'my-child-newname':myChild
            },
            data() {
                return {
                }
            }
        }
    </script>

4.props用法

props通常是以字符串数组的形式列出，例如：

    props:["name","age","color","job","adress"],

如果希望每个字符串都有指定值类型，可以为它定义属性:

    props:{
                name:String,
                age:Number,
                color:Boolean,
                job:Array,
                adress:Object
            },

当父组件赋值类型不对时，浏览器控制台会提示错误信息。

5.让一个对象的属性作为prop传入

传入一个对象的所有属性，如果想让一个对象的属性作为prop传入：
子组件代码如下：

    <template>
      <div>我是子组件，显示来自父组件的消息{{id}}{{title}}</div>
    </template>
    <script>
    export default {
      props: ["id","title"],
      data() {
        return {};
      }
    };
    </script>

父组件中定义一个对象post，它有两个属性，id和title,父组件代码如下：

    <template>
      <div>
        <blog-post v-bind="post"></blog-post>
      </div>
    </template>
    <script>
    import myChild from "./child";
    export default {
      components: {
        "blog-post": myChild
      },
      data() {
        return {
          post: {
            id: 1,
            title: "My Journey with Vue"
          }
        };
      }
    };
    </script>

注释：

     <blog-post v-bind="post"></blog-post>
 等价于
     <blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

6.传递静态或动态prop

传入一个静态的值：

<blog-post title="我是标题"></blog-post>

动态赋值：

<!-- 动态赋予一个变量的值 -->
<blog-post :childtitle="post.title"></blog-post>
<!-- 动态赋予一个复杂的表达式的值 -->
<blog-post :childtitle="post.title+'hello'+post.id"></blog-post>

任何类型的值都可以传给prop,

	<!-- 传入一个数字 -->
    <blog-post :childtitle1="123"></blog-post>
    <!-- 传入一个布尔值 -->
    <blog-post :childtitle2="false"></blog-post>
    <!-- 传入一个数组 -->
    <blog-post :childtitle3="[1,2,3,4,5]"></blog-post>
    <!-- 传入一个对象 -->
    <blog-post :childtitle4="{name:'lisa',age:12}"></blog-post>

7.单向数据流

所有的prop都使得其父子prop之间形成了一个单向下绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行，这样会防止从子组件意外改变父组件的状态。
每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值，这意味着你不应该在一个子组件内部改变prop，如果这样会在浏览器控制台报错。
这里有两中常见的试图改变一个prop的情形：
（1）这个prop用来传递一个初始值，这个子组件接下来希望将其作为一个本地的prop数据来使用，在这种情况下，最好定义一个本地的data属性并将这个prop用作其初始值。
在子组件中,有两个变量，childtitle和mycount，把childtitle导出从父组件获取值，然后传给mycount：

<template>
  <div>
    title数据：{{childtitle}}
    <br>
    count数据：{{mycount}}
  </div>
</template>
<script>
export default {
  props: ["childtitle"],
  data() {
    return {
      mycount: this.childtitle
    };
  }
};
</script>

父级组件代码中,给childtitle赋值，此时，当点击按钮时，childtitle的值会变化：

<template>
  <div>
    <span @click="myClick">点击</span>
    <blog-post :childtitle="parcount"></blog-post>
  </div>
</template>
<script>
import myChild from "./child";
export default {
  components: {
    "blog-post": myChild
  },
  data() {
    return {
      parcount: 0
    };
  },
  methods: {
    myClick() {
      this.parcount++;
    }
  }
};
</script>

以上会出现一个问题，当点击按钮时childtitle的值会跟着变化，但是子组件中mycount的值不会变化，这时mycoun需要使用计算属性computed才能使值跟着变化，子组件中的代码更改如下：

<template>
  <div>
    title数据：{{childtitle}}
    <br>
    count数据：{{mycount}}
  </div>
</template>
<script>
export default {
  props: ["childtitle"],
  data() {
    return {};
  },
  computed: {
    mycount: function() {
      return this.childtitle;
    }
  }
};
</script>

8.prop验证

我们可以为组件的prop指定验证要求，例如你知道的这些类型，如果有一个需求没有被满足，则Vue会在浏览器控制台发出警告。
为了定制prop的验证方式，你可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

props: {
    //   指定基础类型检查
    proA: Number,
    //   可以设置多个类型，该值符合其中一个即可
    proB: [String, Number],
    //    如果该变量必须存在，必填，可以设置required为true，可以通过type设置该值得类型
    proC: {
      type: Number,
      required: true
    },
    // 可以使用default设置默认的值
    proD: {
      type: Number,
      default: 100
    },
    // 可以设置带有默认值得对象
    proE: {
      type: Object,
      //注：对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return {
          meseage: "hello"
        };
      }
    },
    // 可以自定义验证函数
    proF: {
      validator: function(value) {
        //这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      }
    }
  },

当父级组件传过来的值不符合条件，验证失败时，vue控制台会发生警告。
注：prop会在一个组件实例创建之前进行验证，所以实例的属性（如data，computed）在default或validator函数中是不可用的。

type类型包括：
String
Number
Boolean
Array
Object
Date
Function
Symbol
注：type还可以是一个自定义的构造函数，并且通过instanceof来进行检查确认。
例如如下构造函数：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

可以使用以下方式来验证prop的值是否通过new Person创建的。

Vue.component('blog-post', {
  props: {
    author: Person
  }
})