专栏首页wfacebossvue中父子组件传递信息实现

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触发父组件的方法实现。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结

    目采用Webpack+Vue-router的架构方式,开始安装(一切操作都在windows系统上完成)

    wfaceboss
  • 封装数组之添加元素

    在上一小节中,我们对数组进行了一个基本的封装,该小节中,我们在上一次基础上,新增往数组添加元素的方法:

    wfaceboss
  • 封装数组之动态数组实现

    前言:在此之前,我们封装的数组属于静态数组,也即数组空间固定长度,对于固定长度的数组当元素超过容量时会报数组空间不足。为了能更好的使用数组,我们来实现一个可以自...

    wfaceboss
  • reactjs不常见的面试提要

    杭州前端工程师
  • Vue.js入门教程-组件数据传递

    (1)组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例...

    WEBING
  • 如何开发中后台项目

    工作中的你,是不是手上做着后台系统项目,应对着做不完的需求,觉得做后台系统是个没有技术含量的活,技术没法提升,这么想或许你就错了,如果能做以到以下几点,不仅可以...

    用户1741436
  • 浅谈组件化

    我之前在做业务需求的时候,很多的个性化需求并不能快速响应,实现后有时也很难保证系统的可阅读性。不过好消息是,我今年在做京东内容领域的组件化改造和能力输出,之前的...

    公众号_松花皮蛋的黑板报
  • 【译】选择Bit.dev构建组件库的15个理由

    2019年的时候,UI组件库在普及度上有了巨大的飞跃。当然这并不多么令人惊奇,因为像Uber、Airbnb、Booking等等公司都在通过共享的UI组件来保证其...

    腾讯IVWEB团队
  • 解读京东的积木理论

    我之前在做业务需求的时候,很多的个性化需求并不能快速响应,实现后有时也很难保证系统的可阅读性。不过好消息是,我今年在做京东内容领域的组件化改造和能力输出,之前的...

    公众号_松花皮蛋的黑板报
  • Inno Setup 3 :语法解析(二

      接上回。安装脚本段用于解析脚本中各个段的含义及使用方法。其包括[Setup]段、[Files]段、[Run]段等共17个字段,下面逐一进行分析。

    py3study

扫码关注云+社区

领取腾讯云代金券