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名字来一对一替换。