vue-父組件和子組件的交互

　　父組件

<template>
   <div>
          <span>{{time}}</span><span>版權:{{name}}</span>
          <!-- 設一個屬性，讓子組件接收 -->
          <jubu v-bind:jubus = "jubuName"></jubu>
   </div>
</template>
<script>
   import jubu from './jubu.vue';  //引入子組件
    export default{
        data : function(){
            return {
                time:'20180406',
                name : '福安社口鎮',
                jubuName : {name:'sjf',age:26},  //給子組件傳值
            }
        },
        components : {
            'jubu' : jubu   //組冊子組件
        }
    }
</script>
<style scoped>
    *{
        color:red;
    }
</style>

　　子組件

<template>
    <!-- 接收后，就能使用了 -->
    <strong>{{jubus.name}}{{jubus.age}}是局部組件{{id}}</strong>
</template>
<script>
    export default{
        data : function(){
            return {
                id : "9527",
                
            }
        },
        props : ["jubus"], //父組件可能有很多屬性，要接收哪個在這里定義。
    }
</script>

　　在子組件中，props也可以有進一步的詳細設置

<template>
    <!-- 接收后，就能使用了 -->
    <strong>{{jubus}}是局部組件{{id}}</strong>
</template>
<script>
    export default{
        data : function(){
            return {
                id : "9527",
                
            }
        },
        //props : ["jubus"], //父組件可能有很多屬性，要接收哪個在這里定義。
        props : {
            jubus : {
                type : String,  //接收值得類型，類型不對就會報錯
                //type : [String,Number...]  多種類型就寫成數組
                default : "weizhi",  //如果沒有傳值進來，就使用這里定義的默認值
                //require : true,    //該值是否為必須值，true就是沒這個值就報錯。與default二選一使用
            },
        }
    }
</script>

 

　　子組件與父組件交互

子組件
<template>
    <!-- 接收后，就能使用了 -->
    <div>
        <button class="btn-sm btn-primary" @click="share">分享</button>        
    </div>
</template>
<script>
    methods : {
                share(){
                    this.$emit("shared")
                },
    },
</script>

父組件
<template>
   <div>
          <p>分享次數{{num}}</p>
          <jubu @shared = "fooShare"></jubu>
   </div>
</template>

<script>
         import jubu from './jubu.vue';  //引入子組件
         export default{
                data : function(){
                       num : 0 ,
                },
                components : {
            'jubu' : jubu   //組冊子組件
        },
                methods : {
            fooShare(){
                        this.num++
            }
        }
         }
</script>

 　　　以上代碼實現的是，每當點擊子組件中的分享按鈕時，父組件中的num就會加一。

　　如果想從子組件鍵值對給父組件。子組件   this.$emit("shared",{name:"想傳什么值",content:"就傳什么值"})

    父組件   fooShare(event){this.num++;console.log(event);}   //event就是子組件傳過來的{name:"想傳什么值",content:"就傳什么值"}

         如果fooShare函數除了接收event時間對象，自己本身也有參數的話，<jubu @shared = "fooShare(10,$event)"></jubu>

    fooShare(age,$event){this.num++;console.log(event.name+age);}

    以下是代碼

<!-- 子組件 -->
<template>
    <!-- 接收后，就能使用了 -->
    <div>
        <strong>{{jubus}}是局部組件{{id}}</strong>
        <button class="btn-sm btn-primary" @click="share">分享</button>        
    </div>

</template>
<script>
    export default{
        data : function(){
            return {
                id : "9527",
                
            }
        },
        methods : {
                share(){
                    this.$emit("shared",{name:"sjf"})
                },
            },
    }
</script>

<!-- 父組件 -->
<template>
   <div>
          <span>{{time}}</span><span>版權:{{name}}</span>
          <p>分享次數{{num}}</p>
          <jubu @shared = "fooShare(10,$event)"></jubu>
   </div>
</template>
<script>
   import jubu from './jubu.vue';  //引入子組件
    export default{
        data : function(){
            return {
                num : 0,
            }
        },
        components : {
            'jubu' : jubu   //組冊子組件
        },
        methods : {
            fooShare(age,event){
               this.num++;
               console.log(10+event.name);
            }
        }
    }
</script>
<style scoped>
    *{
        color:red;
    }
</style>

 

　　<jubu><strong>父組件</strong></jubu>    jubu是自定義組件，在其中寫的<strong>父組件</strong>是無法顯示的。

　　如果想讓其顯示，則在寫組件的時候要加上<slot></slot>標簽

<template>
    <div>
        <slot>
           <strong>{{jubus}}是局部組件{{id}}</strong>
           <button class="btn-sm btn-primary" @click="share">分享</button>
        </slot>        
    </div>

</template>

　　加上slot后，如果<jubu><strong>父組件</strong></jubu>，那就顯示<strong>父組件</strong>。如果<jubu></jubu>,那就顯示子組件的里的template內容。

<template>
    <div>
        
       <slot name="one"> <strong>{{jubus}}是局部組件{{id}}</strong></slot>
        <slot name="two"><button class="btn-sm btn-primary" @click="share">分享</button></slot>

    </div>

</template>

<jubu @shared = "fooShare(10,$event)">
       <strong slot="one">one組件</strong>
       <strong slot="two">two組件</strong>
</jubu>

　　給slot標簽加name后，以后就能根據name名字來一對一替換。