脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue父子值传递

Vue父子之间值传递的实例教程

 更新时间：2020年07月02日 08:36:32   作者：周龙飞  
这篇文章主要给大家介绍了关于Vue父子之间值传递的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

将通过两个input框实现父子之间的值传递作为演示，效果图

先注册父子各一个组件，代码如下

<div id="app">
    <parent></parent>
  </div>

  <template id="parent">
    <div>
      <input type="text" v-model="text" placeholder="parent">
      <son></son>
    </div>
  </template>
  <template id="son">
    <div>
      <input type="text" placeholder="son">
    </div>
  </template>
new Vue({
    el: "#app",
    components: {
      parent: {
        template: '#parent',
        data() {
          return {
            text: ''
          }
        },
        components: {
          son: {
            template: '#son'
          }
        }
      }
    }
  })

 一、父传子

再父组件通过属性传递值

 <template id="parent">
    <div>
      <input type="text" v-model="text" placeholder="parent">
      <son :text="text"></son>//通过属性值传递
    </div>
  </template>

子组件通过props属性接受

 components: {
          son: {
            template: '#son',
            props:['text'] //通过props属性接受父传递过来的值
          }
        }

这样我们就可以使用父组件传递过来的值了

 <template id="son">
    <div>
      <input type="text" placeholder="son" :value="text">//使用父元素传递过来的值
    </div>
  </template>

看下现在的效果

父组件向子组件传递成功

二、子传父

通过父组件自定义事件，然后子组件用$emit(event,aguments)调用

<template id="parent">
    <div>
      <input type="text" v-model="text" placeholder="parent">
      <son :text="text" @ev="item"></son>//自定义事件
    </div>
  </template>


components: {
      parent: {
        template: '#parent',
        data() {
          return {
            text: ''
          }
        },
        components: {
          son: {
            template: '#son',
            props: ['text']
          }
        },
        methods: {
          item(v) { //自定义事件触发的方法
            this.text = v //使用子组件传递过来的值改变this.text数据
          }
        }
      }
    }

再子组件触发自定义事件

<template id="son">
    <div>
      <input type="text" placeholder="son" :value="text" @input="emit" ref="son">//触发自定义事件
    </div>
  </template>



components: {
      parent: {
        template: '#parent',
        data() {
          return {
            text: ''
          }
        },
        components: {
          son: {
            template: '#son',
            props: ['text'], 
            methods: {
              emit() {
                this.$emit('ev', this.$refs.son.value) //触发自定义事件，并传递值
              }
            }
          }
        },
        methods: {
          item(v) {
            this.text = v
          }
        }
      }
    }

这样就完成了子传父，父传子，效果也完成了

总结

到此这篇关于Vue父子之间值传递的文章就介绍到这了,更多相关Vue父子值传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue中的Props(不可变状态)

    Vue中的Props(不可变状态)

    这篇文章主要介绍了Vue中的Props(不可变状态),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-09-09
  • vue-virtual-scroll-list虚拟组件实现思路详解

    vue-virtual-scroll-list虚拟组件实现思路详解

    这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • Vuex数据持久化实现的思路与代码

    Vuex数据持久化实现的思路与代码

    Vuex数据持久化可以很好的解决全局状态管理,当刷新后数据会消失,这是我们不愿意看到的。这篇文章主要给大家介绍了关于Vuex数据持久化实现的思路与代码，需要的朋友可以参考下
    2021-05-05
  • 写一个Vue loading 插件

    写一个Vue loading 插件

    这篇文章主要介绍了如何写一个Vue loading 插件，帮助大家更好的理解和学习vue 插件的相关知识，感兴趣的朋友可以了解下
    2020-11-11
  • Vue响应式原理Observer、Dep、Watcher理解

    Vue响应式原理Observer、Dep、Watcher理解

    这篇文章主要介绍了Vue响应式原理-理解Observer、Dep、Watcher,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue自定义权限标签详细代码示例

    vue自定义权限标签详细代码示例

    这篇文章主要给大家介绍了关于vue自定义权限标签的相关资料,在Vue中你可以通过创建自定义组件来实现自定义标签组件,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • Vue实现面包屑导航的正确方式

    Vue实现面包屑导航的正确方式

    面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，它的作用是告诉访问者他们在网站中的位置以及如何返回，本文为大家介绍了实现面包屑导航的正确方式，需要的可以参考一下
    2023-06-06
  • Vue 两个字段联合校验之修改密码功能的实现

    Vue 两个字段联合校验之修改密码功能的实现

    本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧
    2021-07-07
  • 五分钟搞懂Vuex实用知识(小结)

    五分钟搞懂Vuex实用知识(小结)

    本篇文章主要介绍了五分钟搞懂Vuex实用知识，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue 项目常用加载器及配置详解

    vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论