美文网首页
VUE中 父子组件数据传递

VUE中 父子组件数据传递

作者: 小太阳可可 | 来源:发表于2019-10-28 14:47 被阅读0次
    父组件
    <template>
        <modal :showModal="showModal" @close="closeModal">      // 将模态窗的显示隐藏的状态传递给子组件
            <p slot="message">您还没有登录</p>
            <span slot="btn">好的</span>
        </modal>
        <div class="btn-area">
            <a class="btn btn--m" @click="addCar" >加入购物车</a>
        </div>
    </template>
    
    <script>
        export default{
            showModal:false,
            methods:{
                closeModal(){
                    this.showModal = false;
                },
                addCar(){
                    this.showModal = true;
                },
            }
        }
    </script>
    

    子组件

    <template>
        <div class="modal-wrap" v-show="showModal" @click="closeModal">
            <slot name="message"></slot>
            <div>
                <slot name="btn"></slot>
            </div>
        </div>
    </template>
    
    <script>
      import { MessageBox } from 'element-ui';
      export default {
        props:[
          'showModal'
        ],
        methods: {
          closeModal(){
            this.$emit('close');
          }
        }
      }
    </script>
    

    相关文章

      网友评论

          本文标题:VUE中 父子组件数据传递

          本文链接:https://www.haomeiwen.com/subject/unrdyctx.html