组件通信-父组件向子组件传递数据

 父组件向子组件传递：props

1.字符串数组传递 

加v-bind，会把后面的字符串当成变量，去父组件查找值

<div id="app">
  <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>

 不加v-bind，会把后面的字符串输出，直接cmovies="movies"

<div id="app">
<!--  <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>-->
  <cpn cmovies="movies" :cmessage="message"></cpn>
</div>

 

列表展示数组每项内容

<template id="cpn">
<div>
  <ul>
    <li v-for="item in cmovies">{{item}}</li>
  </ul>
  <h2>{{cmessage}}</h2>
</div>
</template>

<div id="app">
  <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
<!--  <cpn cmovies="movies" :cmessage="message"></cpn>-->
</div>

<template id="cpn">
<div>
  {{cmovies}}
  <h2>{{cmessage}}</h2>
</div>
</template>

<script src="../js/vue.js"></script>
<script>
  //子组件,父传子使用props
  const cpn= {
    template:"#cpn",
    props:["cmovies","cmessage"],
    data(){
      return{}
    },
    methods:{

    }
      }

      //父组件
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板",
          movies:["电影1","电影2","电影3"]
        },
    components:{
      cpn
    }
  })
</script>

2.对象写法传递

2.1可指定类型

    props:{
       // 1.类型限制
      cmovies:Array,
       cmessage:String
    },

2.2可提供默认值

    props:{
      cmessage:{
        //提供默认值
        type:String,
        default:"aaaaaaaa"
      }

去掉v-bind传入的message，当使用子组件内cmessage未传入初始值 

<div id="app">
  <cpn v-bind:cmovies="movies" ></cpn>
<!--  <cpn cmovies="movies" :cmessage="message"></cpn>-->
</div>

<template id="cpn">
<div>
  <ul>
    <li v-for="item in cmovies">{{item}}</li>
  </ul>
  <h2>{{cmessage}}</h2>
</div>
</template>

类型是对象/数组时，默认值必须为函数

    cmovies:{
        type:Array,
        default:[]
        }
      }

      cmovies:{
        type:Array,
        default(){
          return[]
        }
      }

2.3可指定必须填入初始值

<div id="app">
  <cpn ></cpn>
<!--  <cpn cmovies="movies" :cmessage="message"></cpn>-->
</div>

    props:{
      cmessage:{
        //提供默认值
        type:String,
        default:"aaaaaaaa",
        required:true
      }