父子組件通訊使用

一、父子組件

   1.創建組件構造器   Vue.extend()--> const app = new Vue({})

   2.註冊組件   Vue.component('my-cpn',cpnC)

   3.使用組件 <div> <my-cpn></my-cpn></div>

//父組件模板
<div id="app">
   <cpn @cFn="parentFn"></cpn>
   <p>這是子組件傳來的：{{message}}</p>
    
<cpn v-bind:cmovies="movices"></cpm>
</div>

<script>
//father components 
const app = new Vue({
       el:'#app',       
       data:{
           message:'',
           movies:['海賊王','天氣之子','柯南','足球小將','銀狐','叮噹貓','籃球'],
           },
         components:{
           cpn:cpn
          },
         methods:{
              parentFn(aa){
                  this.message = aa
            }
         }

    })

</script>

</script>
//子組件模板
<template id="cpn">
  <div>
    <input type="text" v-model="message"/>
     <button @btnClick>發送</button>
     

  </div>
</template>

<script>
  const cpn ={
       temmplate:'#cpn'
       props:{'cmovies'},
       data(){
         return{
           message:'這是來自子組件的消息請注意查收'

       }},methods:{
         btnClikck(){
              this.$emit(cFn,this.message)
            }

       
       }
}

 

 

 

二、父子組件通信

     

<div id="app">
      <cpn :number1="num1" :number2="num2" @num1Change="num1Change" @num2Change="num2Change"></cpn>
</div>

<template id="cpn">
 <div>
   <h2>props:{{number1}}</h2>
   <input>data:{{dnumber1}}</input>
   <h2>props:{{number2}}</h2>
  <input>data:{{dnumber2}}</input>
 </div>
</template>

<script>
//father
const app = new Vue({
    el:"#app",
    data:{
      message:'hello',
       num1:1,
       num2:2,
     },
methods:{
   num1Change(value){
    this.num1= value

},
   num2Change(){
       this.num2= value

}}
//child
   components:{
        template:'#cpn',
        props:{
          number1:Number,
          number2:Number
        }
        data(){
          return{
           dnumber1:this.number1,
           dnumber2:this.number2

       }},
      methods:{
          num1Input(event){
             this.dnumber1 = event.target.value;
             this.$emit('number1Change',this.dnumber1)

          },
         num2Input(event){
             this.dnumber2 = event.target.value;
             this.$emit('number2Change',this.dnumber2)

          }

   }
})

</script>