vue 进阶之实现父子组件间的传值

 更新时间:2019年04月26日 09:40:43   作者:丰寸   我要评论

这篇文章主要介绍了vue 进阶之实现父子组件间的传值,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

本章我们将深入了解一下组件,并实现父子组件间的传值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1"></counter>
  <counter :count="count2"></counter>
</div>
<script>
  Vue.component("counter", {
    props:['count'],
    data(){
      return{
        number: this.count,
      }
    },
    template: `
      <p>{{count}} {{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
    }
  })
</script>
</body>
</html>

结果如下:

上面的代码中我们定义了一个 counter 组件,并在 HTML 内插入了两次,分别通过 :count = "" 的方式将父组件内的 count1 和 count2 传入,然后我们在 counter 组件内通过 props 属性将 count 属性接住,这样我们就将父组件的值传递给了子组件。我们就可以在 template 的模板中将传过来的 count 数据插入,我们也可以在子组件的 data 内将传过来的 count 值赋值给一个新的变量 number。

如果从父组件传过来的值需要参与逻辑运算时我们推荐将传入的值重新赋值给一个变量,因为子组件不允许直接修改父组件传过来的值,我们可以将传入的值赋值给新的变量,然后将该变量再传给父组件来修改父组件的值。如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1" @change="handleChange"></counter>
  <counter :count="count2" @change="handleChange"></counter>
  <p>{{total}}</p>
</div>
<script>
  Vue.component("counter", {
    props: ['count'],
    data() {
      return {
        number: this.count,
      }
    },
    methods: {
      handleClick() {
        this.number++;
        this.$emit('change', 1)
      }
    },
    template: `
      <p @click="handleClick">{{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
      total: 3,
    },
    methods: {
      handleChange(number) {
        this.total = this.total + number
      }
    }
  })
</script>
</body>
</html>

在以上代码中,我们在父组件中定义了一个 total 数据,初始值为 count1 + count2 的和。我们在子组件内定义了一个 handleClick() 的方法,让父组件传过来的 count 值每次都 +1,我们还在 handleClick() 的方法内定义了 this.emit( ′ change ′ ,1)的方法,它的意思是子组件通过 emit(′change′,1)的方法,它的意思是子组件通过emit 属性向外触发一个 change 事件,并且携带了一个参数 1,然后我们在 HTML 的 <counter> 标签内在父组件的 methods 属性内通过 handleChange() 方法监听这个 change 事件,即 @change 和 $emit 的事件名称自己定义,只要名称一致即可。在 handleChange() 方法内接收从子组件通过 change 事件传过来的参数 1,让后让 total 数据加上这个参数 1 即可实现一个简单的累加计算。

以上便是子组件向父组件传值的过程,结果如下:

从上面的例子我们已经实现了父子组件间的相互传值,是通过 change 事件将每次累加的数值 1 传给父组件,通过数据的方式修改 total 值,Vue 官方建议我们尽量通过数据的方式而不是操作 DOM 的方式来实现操作,但是在极端条件下我们必须要操作 DOM 来实现,Vue 也为我们提供操作 DOM 的方法,如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1" @change="handleChange" ref="one"></counter>
  <counter :count="count2" @change="handleChange" ref="two"></counter>
  <p>{{total}}</p>
</div>
<script>
  Vue.component("counter", {
    props: ['count'],
    data() {
      return {
        number: this.count,
      }
    },
    methods: {
      handleClick() {
        this.number++;
        this.$emit('change')
      }
    },
    template: `
      <p @click="handleClick">{{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
      total: 3,
    },
    methods: {
      handleChange() {
        console.log(this.$refs.one);
        console.log(this.$refs.two);
        this.total = this.$refs.one.number + this.$refs.two.number;
      }
    }
  })
</script>
</body>
</html>

上面的代码中,我们并没有通过 $emit 里的 change 事件传值给父组件,而是在 <coute> 标签内分别定义了 ref="one" ref="two"  属性,并且在 handleChange() 方法内通过监听子组件的 change 改变时打印一下这两个 ref 内的值,控制台的输出日志如下:

里面既包含了 $el 的 DOM,还有初始值 count=1 即handleClick() 方法执行后 number=2 的值,所以我们可以拿到 number 的值,让两个 number 相加即为 total 的值。

在 vue 中我们还是建议通过数据来操作而不是通过 DOM 来执行操作。

总结

以上所述是小编给大家介绍的vue 进阶之实现父子组件间的传值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • vue-cli项目使用mock数据的方法(借助express)

    vue-cli项目使用mock数据的方法(借助express)

    现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率。今天就来分析下前端常用的mock数据的方式是如何实现的,需要的朋友可以参考下
    2019-04-04
  • vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper。这篇文章主要介绍了vue-awesome-swiper - 基于vue实现h5滑动翻页效果 ,需要的朋友可以参考下
    2018-11-11
  • vue router 用户登陆功能的实例代码

    vue router 用户登陆功能的实例代码

    这篇文章主要介绍了vue router 用户登陆功能的实例代码,主要用到H5中的会话存储(sessionStorage)、vue-router路由前置操作、路由元信息(meta)等知识点,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-04-04
  • 开发Vue树形组件的示例代码

    开发Vue树形组件的示例代码

    本篇文章主要介绍了开发Vue树形组件的示例代码,它展现了组件的递归使用。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 详解vue 兼容IE报错解决方案

    详解vue 兼容IE报错解决方案

    这篇文章主要介绍了详解vue 兼容IE报错解决方案,详细的介绍了几种原因及其解决方案,非常具有实用价值,需要的朋友可以参考下
    2018-12-12
  • Vue 中批量下载文件并打包的示例代码

    Vue 中批量下载文件并打包的示例代码

    本篇文章主要介绍了Vue 中批量下载文件并打包的示例代码,用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件,有兴趣的可以了解一下
    2017-11-11
  • Vue.js用法详解

    Vue.js用法详解

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的渐进式框架。这篇文章主要介绍了Vue.js用法详解,需要的朋友可以参考下
    2017-11-11
  • 基于Vue实现后台系统权限控制的示例代码

    基于Vue实现后台系统权限控制的示例代码

    本篇文章主要介绍了基于Vue实现后台系统权限控制的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • element UI upload组件上传附件格式限制方法

    element UI upload组件上传附件格式限制方法

    今天小编就为大家分享一篇element UI upload组件上传附件格式限制方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue2.x集成百度UEditor富文本编辑器的方法

    vue2.x集成百度UEditor富文本编辑器的方法

    这篇文章主要为大家详细介绍了vue2.x集成百度UEditor富文本编辑器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09

最新评论