vue组件（子传父，父传子案例）

在vue中父组件向自子组件传递props,子组件向父组件传递属性是用$emit(发布订阅)
下面是一个模态框示例，可以利用到这两个属性。基本逻辑是点击页面上一个按钮，
弹出弹框，点击弹框上关闭按钮，隐藏弹框
（这不是很简单嘛。。。我jq两行就可以实现）确实是但是jq实现的并不是组件，不能每次都把html和js都复制一遍吧，这样工作效率未免太低了，(人家盖房子都用水泥浇筑了，你非要搬砖，你累不累啊)

css

 <style>
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0, 0, 0, .35);
            top: 0;
            left: 0
        }

        .dialog {
            width: 400px;
            height: 150px;
            background: #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0)
        }
    </style>

先想一下思路：页面上一个button 点击弹出弹框，因为vue是数据驱动的视图，所以需要需要定义一个flag变量，如果flag = ture 那么弹出
弹框出现后，目前是在子组件内，所以需要$emit() 一个关闭事件把flag变为false从而关闭弹框

<body>
<div id="app">
    <button @click="flag=true">弹</button>
    <modal :show="flag" @close="()=>flag=false"></modal>
</div>
<template id="dialog">
        <div class="mask" v-show="show">
            <div class="dialog">
                <button @click="dialogClose">关闭</button>
            </div>
        </div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
  let modal = {
      props:['show'],
      template:'#dialog',
      methods:{
          dialogClose(){
             this.$emit('close')
          }
      }
  }
    let vm = new Vue({
        el:'#app',
        data:{
           flag:false
        },
        components:{
            modal
        }
    })
</script>
</body>

vue组件（子传父，父传子案例）

css

推荐阅读更多精彩内容