vue商城项目父组件与子组件数据传递

最新推荐文章于 2022-05-09 21:52:21 发布

原创最新推荐文章于 2022-05-09 21:52:21 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

前端框架专栏收录该内容

15 篇文章

订阅专栏

本文探讨了在Vue项目中，如何实现父组件向子组件传递数据，特别是在一个商品界面（GoodList.vue）中调用通用模态框（Modal.vue）的场景。父组件通过props将mdShow变量传递给子组件，控制模态框的显示和隐藏。子组件不能直接修改该状态，而是在需要关闭模态框时，通过$emit触发父组件定义的close事件来实现状态更新。

父组件可以传递信息到子组件，但子组件不能随意改变这个状态
子组件的状态只能是父组件传递过来，不能是子组件自己改变
子组件修改状态值时不能够影响到子组件
父组件传到子组件
子组件是一个通用的模态框
Modal.vue

<div><div class="md-modal modal-msg md-modal-transition"v-bind:class="{'md-show':mdShow}" >
    <div class="md-modal-inner">
      <div class="md-top">
        <button class="md-close" @click="closeModal">Close</button>
      </div>
      <div class="md-content">
        <div class="confirm-tips">//可改变
          <slot name="message"></slot>//插槽，
        </div>
        <div class="btn-wrap">//可改变
          <slot name="btnGroup"></slot>//插槽
        </div>
      </div>
    </div>
  </div>
    <div class="md-overlay" v-if="mdShow" @click="closeModal"></div>
  </div>

父组件是一个商品界面
GoodList.vue
调用子组件的准备

<modal><modal>
  import Modal from './../components/Modal'
  ...
  export default {
  components:{
      Modal
    },
  }

插槽引用

   <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
       <p slot="message">
         请先登录，否则无法加入到购物车！
       </p>
       <div slot="btnGroup">
         <a class="btn btn --m" href="javascript:;" @click="mdShow = false">关闭</a>
       </div>
     </modal>

mdShow控制变量的显示隐藏，默认是false,不显示
当未登录加入购物车时
this.mdShow = true;
子组件Modal.vue
通过 props:[“mdShow”],接收变量

此时只能是父组件传递到子组件属性

子组件传递到父组件

首先在子组件定义closeModal()方法，这个方法要关闭模态框
通过$emit触发父组件的close事件，通知父组件的作用

methods{
closeModal(){
          this.$emit("close");
          //相当于jQuery的trigger.("click")
        }
 }

在父组件定义了一个close事件
当事件触发时，关闭窗口

v-on:close="closeModal"
closeModal(){
          this.mdShow = false;
          //this.mdShowCart = false;
      }