vue組件（子傳父，父傳子案例）

  • 在vue中父組件向自子組件傳遞props,子組件向父組件傳遞屬性是用$emit(發(fā)布訂閱)
  • 下面是一個模態(tài)框示例，可以利用到這兩個屬性。基本邏輯是點擊頁面上一個按鈕，
    彈出彈框，點擊彈框上關閉按鈕，隱藏彈框
  • （這不是很簡單嘛。。。我jq兩行就可以實現(xiàn)）確實是但是jq實現(xiàn)的并不是組件，不能每次都把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是數(shù)據(jù)驅動的視圖，所以需要需要定義一個flag變量，如果flag = ture 那么彈出
  • 彈框出現(xiàn)后，目前是在子組件內(nèi)，所以需要$emit() 一個關閉事件把flag變?yōu)閒alse從而關閉彈框
<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>
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容