父传子
下面是子组件
            
            
              html
              
              
            
          
          <template>
<h1>{{ count }}</h1>
</template>
<script>
expose default {
    name:'HelloWorld',
    props: {
        count:{
            type:[String,Number],
            default:"100"
        }    
    }
}
</script>子组件使用Props发送
父组件接收:
            
            
              html
              
              
            
          
          <template>
<div id = "app">
    <HelloWorld count = 100></HelloWorld>
</div>
</template>
<script>
    import HelloWorld from './components/HelloWorld.vue'
    export default {
        name: 'App',
        components: {
            HelloWorld
        },
    }
}
</script>子传父
eg:每个商品选中后,把价钱传给父组件,然后结算。
            
            
              html
              
              
            
          
          <template>
<h1>{{ count }}</h1>
<button @click="handler">按钮</button>
</template>
<script>
expose default {
    name:'HelloWorld',
    props: {
        count:{
            type:[String,Number],
            default:"100"
        }    
    },
    data () {
        return {
        childCount: 0
        }
    },
    methods: {
        handler () {
            this.childCount++,
            this.$emit('child-count-change',this.childCount)
        }
    }
}
</script>父组件:
            
            
              html
              
              
            
          
          <template>
<div id = "app">
    <HelloWorld count = 100,@child-count-change="handler"></HelloWorld>
    <h1>{{ childData }}</h1>
</div>
</template>
<script>
    import HelloWorld from './components/HelloWorld.vue'
    export default {
        name: 'App',
        components: {
            HelloWorld
        },
        data () {
            childData: 0
        }
        methods: {
            handler (childCount) {
                this.childData = childCount
            }
        }
    }
</script>