Vue组件化开发 组件通信 父子组件传值

1.Vue组件化的基本使用
基本使用，不简化的

<div id=“app”>
  //3.使用组件 
  <a-cpn></a-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1.创建组件构造器对象
const cpnC=Vue.extend({
//``倒引号  模板字符串  es6中``定义字符串 换行的时候可以直接写  
    template:`
      <div >
          <h2>我是标题</h2>
      </div>
    `
)}
//2.注册组件（全局组件）
Vue.component('a-cpn',cpnC)  //引号中填组件的标签名
let app=new Vue({
  el:'app',
  data:{
  }
)}
</script>

2.全局组件和局部组件

• 全局组件
  能在所有Vue实例中使用

//第一个VUE实例
<div id=“app”>
  <a-cpn></a-cpn>
</div>
//第二个VUE实例
<div id=“app2”>
  <a-cpn></a-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1.创建组件构造器对象
const cpnC=Vue.extend({
    template:`
      <div >
          <h2>我是标题</h2>
      </div>
    `
)}
Vue.component('a-cpn',cpnC) 
let app=new Vue({
  el:'app',
  data:{
  }
)}
let app2=new Vue({
  el:'app',
  data:{
  }
)}
</script>

• 局部组件

<div id=“app”>
  <a-cpn></a-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
const cpnC=Vue.extend({
    template:`
      <div >
          <h2>我是标题</h2>
      </div>
    `
)}
let app=new Vue({
  el:'app',
  data:{
  }
)}
let app2=new Vue({
  el:'app',
  data:{
  },
  components:{
    cpn:cpnC
  }
)}
</script>

3.父组件和子组件

<div id=“app”>
  <a-cpn></a-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//cpnC1是子组件
const cpnC1=Vue.extend({
    template:`
      <div >
          <h2>我是标题1</h2>
      </div>
    `
)}
//cpnC2是父组件
const  cpnC2=Vue.extend({
      template:`
        <div>
          <h2>我是标题2</h2>
          <cpnC1></cpnC1>
        </div>
      `,
      components:{
             cpnC1:cpnC1
      }
})
//root根组件
let app=new Vue({
  el:'app',
  data:{
  },
  components:{
    cpn2:cpnC2
  }
)}
</script>

4.注册组件的语法糖

• 全局组件

<div id=“app”>
  <a-cpn></a-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('a-cpn',{
      template:`
        <div>
          <h2>我是标题</h2>
        </div>
      `
}) 
let app=new Vue({
  el:'app',
  data:{
  }
)}
</script>

• 局部组件

let app=new Vue({
  el:'app',
  data:{
  },
  components:{
    cpn2:{
      template:`
        <div>
          <h2>我是标题</h2>
        </div>
      `
    }
  }
)}

5.不用脚手架的 模板分离写法

<!--1.通过script标签，注意type="text/x-template"-->
<script type="text/x-template" id="cpn">
  <div>
      组件内容
  </div>
</script>
<!--2.template标签-->
<template id="cpn">
 <div>
      组件内容
  </div> 
</template>

<script src="../js/vue.js"></script>
<script>
Vue.component('a-cpn',{
      template:'#cpn'
}) 
</script >

6.组件数据的存放

Vue.component('a-cpn',{ 
      template:'#cpn',
      data(){
         return{
           title:'abc'
         }
      }
}) 

7.组件中的data为什么是一个函数
每个组件需要独立的保存数据的地方，如果是个obj那么一个组件重复使用多次，更改某一个值，所有使用这个组件的数据将都会被改变。方法则不会。

8.父子组件的通信
子组件不能直接引用父组件或者Vue实例里面的数据
通过props向子组件传递数据
通过自定义事件向父组件发送消息 $emit

1）父组件向子组件传值
prop基本用法

<div id="app">
    <cpn :cmovies="movies" :cmessage="message"></cpn>  //把子组件的属性，绑定上父组件的值（自己理解的不知道对不对）
</div>

//模板 不会显示
<template id="cpn">
    <div>
        <p>{{cmovies}}</p>    //自己定义的
        <h2>{{cmessage}}</h2>
    </div>
</template>
</body>

<script src="../js/vue.js"></script>
<script>
   const cpn={
       template:'#cpn',
       //1. 数组写法 props(共三种写法 三选一)
       props:['cmovies','cmessage'],
       props:{
           //2.类型限制  （三选一）
           cmovies:Array,
           cmessage:String,
           
           // 3.提供一些默认值  （三选一）
           cmessage:{
               type:String,
               default:'2345678',//当父组件没传这个值 就是默认值
               required:true //加上这个required  则父组件必须传这个不然报错
           }，
            cmovies:{
               //如果类型是对象或者数组的时候，默认值必须是一个函数
               type:Array,
               default(){
                   return []
               }
           }
       },
       data(){
           return
       }
   }
   const app = new Vue({
       el:'#app',
       data:{
           messgae:'你好呀',
           movies:['电影','电影2','电影3']
       },
       components:{
           cpn
       }
   })

</script>

prop驼峰

<div id="app">
    <cpn :c-movies="movies" :c-message="message"></cpn> 
    //含有驼峰需要以-连接形式传值
</div>

//模板 不会显示
<template id="cpn">
    <div>
        <p>{{cMovies}}</p>   
        <h2>{{cMessage}}</h2>
    </div>
</template>
</body>

<script src="../js/vue.js"></script>
<script>
   const cpn={
       template:'#cpn',
       props:{
           cMessage:{
               type:String,
               default:'2345678',
               required:true 
           }，
            cMovies:{
               type:Array,
               default(){
                   return []
               }
           }
       },
       data(){
           return
       }
   }
   const app = new Vue({
       el:'#app',
       data:{
           messgae:'你好呀',
           movies:['电影','电影2','电影3']
       },
       components:{
           cpn
       }
   })

</script>

2）子组件向父组件传值（自定义事件）

//父组件模板
<div id="app">
    //3.父组件绑定子组件的方法  v-on:item-click  监听到了以后触发cpnClick方法
    <cpn @item-click="cpnClick"></cpn>
</div>

//模板 不会显示
<template id="cpn">
    <div>
      <button v-for="item in aArray" @click="btnClick(item)">{{item.name}}</button>  
        //1.首先 监听子组件事件，并传参
    </div>
</template>
</body>

<script src="../js/vue.js"></script>
<script>
   const cpn={
       template:'#cpn',
       data(){
           return{
               aArray:[
                   {id:'12345', name:'wertyu'},
                   {id:'2457', name:'sffgt'},
                   {id:'84543', name:'etyr'}]
           }
       },methods:{
           //2.监听子组件方法  发射事件 item-click  传参item
           btnClick(item){
               this.$emit('item-click',item)
           }
       }
   }
   //父组件
   const app = new Vue({
       el:'#app',
       data:{
       },
      components:{
           cpn
       },
       methods:{
           //4.操作  这里能拿到传进来的value
           cpnClick(value) {
               console.log(value);
           }
       }
   })
</script>

3)父子组件通信 子组件通过子组件修改自己的值和父组件的值 结合双向绑定案例 (这是基础 实际不用这个 用vuex）

<div id="app">
    <cpn :number1="num1"  :number2="num2"   @number1change="number1change" @number2change="number2change"></cpn>
    //4.父组件绑定子组件发送过来的函数并触发方法
</div>

<template id="cpn">
    <div>
        <h2>{{number1}}</h2> //1.首先 找到要显示和修改的值
         //<input type="text" v-model="dnumber1">
        <input type="text" :value="dnumber1" @input="num1Input" >
        //2. 把v-model  拆成  :value="dnumber1" @input="num1Input"形式  由于prop不能直接修改要通过修改父组件的值修改props   所以{{}}里的参数和这里：value的参数不一样  这里是data()返回的参数    data()只是拿了props里的值  修改data()的值不会修改props里的值
        //为啥要拆成@input 因为我要监听input的改变  根据改变的值给父组件发射$emit函数  v-model不能发射$emit函数
        <h2>{{number2}}</h2>  
        //<input type="text" v-model="dnumber2"> 
        <input type="text" :value="dnumber2" @input="num2Input" >
       
    </div>
</template>
</body>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
       el:'#app',
       data:{
         num1:1,
         num2:0
       },
       methods:{
       //5.在方法中修改自己的值   注意数据类型
          number1change(value){
                 //this.num1 = value  报错 数据类型不对
                 this.num1 = paresInt(value)  
                 //解析字符串 返回一个整数
          },
          number2change(value){
                 this.num2 = value
          }
      }
       components:{
           cpn:{
            template:'#cpn',
            props:{
                number1:Number,  
                number2:Number,
                //props不支持 值的修改  v-model直接绑定是可以修改的 但是会报错 报错推荐用data()修改
           },
           data(){
             // 组件中的data是个函数  若不需要改父组件的值直接 v-model那条 写到这就可以 
              return{
                 dnumber1:this.number1,
                 dnumber2:this.number2
               }
            },
            methods:{
              num1Input(event){ 
                //3.触发子组件绑定的方法  给父组件发射一个$emit函数 把最终的值传过去
                  this.dnumber1 = event.target.value;   //将input中的value赋值给dnumber1
                  this.$emit('number1change',this.dnumber1 )  //发射函数
                  this.number2= this.dnumber1 *100  //把data（）里的值改了
                  this.$emit('number2change',this.dnumber2 ) //再通过父组件把 props里的值改了
              },
             num2Input(event){ 
                  this.dnumber1 = event.target.value;  
                  this.$emit('number2change',this.dnumber2 )  
                  this.dnumber2= this.dnumber1/100
                 this.$emit('number1change',this.dnumber1 )  
              }
            }
          }
       }
   })
</script>