大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Vue中子组件与数据传递的示例分析-创新互联

小编给大家分享一下Vue中子组件与数据传递的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联公司的客户来自各行各业,为了共同目标,我们在工作上密切配合,从创业型小企业到企事业单位,感谢他们对我们的要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括成都网站设计、做网站、电商网站开发、微信营销、系统平台开发。

如何传递

父组件向子组件在进行传递时,使用的是 prop 特性进行传递。

约定

老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件:

  • 子组件的 props 中定义要传递的变量名

  • 变量名同组件的命名规范

  • 父组件传值时,需要使用 短横线分隔命名

  • 使用 v-bind 进行传值

定义

首先在子组件中定义:

// Child.vue

export default {
  name: 'child'
  props: ['teamList']
}

这里使用了 驼峰命名 ,在传值时需注意要转换成 短横线分隔命名 。

我们定义了一个 teamList 的变量,此时我们就可以在这个组件中通过 this 使用这个变量了(同 data 中的数据)。

传值

在父组件中进行传值:

父组件中使用 v-bind 即可将数据传递下去了。

向子组件传递数据就是这么简单,本质上和 data 一样,只是这里单独使用 prop 特性将其区分开来。

需要注意的时:

通过 prop 特性传递下去的数组是 “单向”绑定的,父组件对数组的更新会影响到子组件。因此并不建议子组件对 prop 特性中的值进行修改

Js中在传递对象和数组时传递的时引用!因此:当子组件修改父组件传递下来的对象/数组时会影响到父组件中的状态

这个特性有利有弊,在某些情况下可以通过这种类似 hack 的方式来进行处理。

子组件反向传递

上面说到了,并不建议在子组件中修改 props 中的数据。那么当需要向父组件进行某种 反馈 时怎么办呢?

假设现在我们有一个登录弹出框的组件,通过子组件的方式调用了,当我们登录成功时该如何 通知 父组件做出相应的反应呢?

  1. 通过自定义事件,子组件调用 this.$emit('事件名', 参数)

  2. 使用 v-model 、组件中 model 选项与 input 事件模拟成 input 控件,对父组件中的值进行更新

  3. .sync 修饰符进行 “双向绑定”

这里只介绍第一种方式,因为后两种方式若羽也没用过几次 o(╯□╰)o

emit使用约定

  • 事件名的命名规范同组件

  • 父组件在绑定子组件上的自定义事件时,必须 完全匹配 事件名,这里不像组件与子组件中使用时是使用的 短横线分隔命名 ,而是 完全匹配 。

约定较少,主要注意使用时是和组件不同的,名称需要完全匹配。

emit使用

首先我们在子组件中定义事件,说是定义,不如说是调用。因为是子组件直接在某段逻辑中调用的 emit :

// child.vue

export default {
  methods: {
    submit() {
      this.$emit('submitForm', this.data)
    }
  }
}

这里我们定义了调用的自定义事件名称为 submitForm ,那么在父组件中使用:




可以看到这里在使用时, v-on 绑定的事件名称是 submitForm 而不是 submit-form 。

这一点需要注意。

以上是“Vue中子组件与数据传递的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前题目:Vue中子组件与数据传递的示例分析-创新互联
文章路径:http://dzwzjz.com/article/dpdoso.html
在线咨询
服务热线
服务热线:028-86922220
TOP