12 组件之间的通信

组件之间的通信

父子组件的通信

父组件通过props向子组件传递数据

子组件通过事件向父组件发送消息

<div id="app">
   <!--<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>-->
   <cpn :cmessage="message"></cpn>
   <!--<cpn v-bind:cmovies="movies"></cpn>-->
</div>
<!--2. template标签-->
<template id="cpn">
   <div>
       <ul>
           <li v-for="item in cmovies">
               {{item}}
           </li>
       </ul>
       <h2>{{cmessage}}</h2>
   </div>
</template>

<script src="../js/vue.js"></script>
<script>
const cpn={
 template:'#cpn',
//  props:['cmovies','cmessage'],  传数组
 props:{
//    1. 类型限制
//    cmovies:Array,
//    cmessage:String,
   //2 .提供默认值 以及必传
   cmessage:{
     type:String,
     default:'aaaaa',   //没有传值时提供默认值
     required:true      //必须传值
   },
   cmovies:{
     type:Array,
     //类型是对象或者数组时，默认直必须是一个函数
     default(){
       return []
     }
   }

 },
 data(){
   return{
   }
 },
 methods:{
 }
};
//root组件
const app=new Vue({
 el:'#app',
 data:{
   message:'你好呀',
   movies:['海王','海贼王','海尔兄弟']
 },
//  语法糖 局部组件
 components:{
   cpn:cpn
 }
})

</script>

父传子props驼峰标识

<div id="app">
   <!--驼峰写法 大写用-小写代替-->
   <cpn v-bind:c-movies="movies" :c-message="message"></cpn>
   <!--<cpn :cMessage="message"></cpn>-->
   <!--<cpn v-bind:cmovies="movies"></cpn>-->
</div>
<!--2. template标签-->
<template id="cpn">
   <div>
       <ul>
           <li v-for="item in cMovies">
               {{item}}
           </li>
       </ul>
       <h2>{{cMessage}}</h2>
   </div>
</template>

<script src="../js/vue.js"></script>
<script>
const cpn={
 template:'#cpn',
//  props:['cmovies','cmessage'],  传数组
 props:{
//    1. 类型限制
//    cmovies:Array,
//    cmessage:String,
   //2 .提供默认值 以及必传
   cMessage:{
     type:String,
     default:'aaaaa',   //没有传值时提供默认值
     required:true      //必须传值
   },
   cMovies:{
     type:Array,
     //类型是对象或者数组时，默认直必须是一个函数
     default(){
       return []
     }
   }

 },
 data(){
   return{
   }
 },
 methods:{
 }
};
//root组件
const app=new Vue({
 el:'#app',
 data:{
   message:'你好呀',
   movies:['海王','海贼王','海尔兄弟']
 },
//  语法糖 局部组件
 components:{
   cpn:cpn
 }
})
</script>