vue中父子组件传递信息实现

为了能够在父子组件中实现双向控制，需要以下的步骤：

第一步：子组件中挖坑

（1）在需要父组件填充具体内容的地方挖坑，方式为

  <slot name="message"></slot>

通过slot和name指定坑

第二步：父组件中填坑（具体内容）

（1）引入子组件作为其中一个模块

在父组件的script中通过import引入，然后通过components进行挂载，最后以标签的形式使用

（2）在子组件模块区域内，使用slot="name的值"指定需要填的坑

<p slot="message">//填坑的内容

  <span>加入购物车成功</span>

 </p>

上述两步只是实现了组件简单内容的填充，但涉及到值的传递，及控制时还需如下的操作

（1）父组件中的值传递到子组件中：

子组件使用props拿到传递过来的值（在子组件的export default中）

此时父组件与值组件的代码为：

父组件：

<Modal v-bind:mdShow="mdShow" >//Modal是子组件在父组件中

            <p slot="message">

                请先登录，否则无法加入购物车！

            </p>

   </Modal>

<script>

import Modal from  '@/components/Modal.vue'

 export default {

  data () {

   return {

       mdShow: false,

          }

        },

  components: {

            Modal

        },

}

</script>

子组件中代码为：

 <div  v-bind:class="{'md-show':mdShow}">

      <div class="confirm-tips">

          <slot name="message"></slot>

       </div>

    </div>

<script>

    export default{

        props: ["mdShow"],//接受到来自父组件的值

        data(){

            return {

            }

        },

     }

    }

</script>

（2）子组件控制父组件中的值：实质上通过子组件的方法间接通过$emit方法去调用父组件中的方法，

例如父组件有一个方法为close

<p  v-on:close="closeModal">

<Modal v-bind:mdShow="mdShow" >//Modal是子组件在父组件中

            <p slot="message">

                请先登录，否则无法加入购物车！

            </p>

   </Modal>

</p>

<script>

import Modal from  '@/components/Modal.vue'

 export default {

  data () {

   return {

       mdShow: false,

          }

        },

  components: {

            Modal

        },

methods:{

  closeModel(){

  this.mdShow = true;

}

}

</script>

(2)子组件中需要触发父中绑定的close方法

<div  v-bind:class="{'md-show':mdShow}">

<div @clicki="closeModal">Close<div>

      <div class="confirm-tips">

          <slot name="message"></slot>

       </div>

    </div>

<script>

    export default{

        props: ["mdShow"],

        data(){

            return {

            }

        },

        methods: {

            closeModal(){

                this.$emit("close");//触发父组件中定义的方法

            }

        }

    }

</script>

初学阶段简单总结一下：子组件中挖坑，父组件填坑。

前面两步骤只是简单实现组件的加载，对于有值传递和控制，需要通过该后面两步的props接受来自父组件的值和$emit触发父组件的方法实现。

巴特西

vue中父子组件传递信息实现

最新文章

热门文章