当前位置:首页 > 编程教程 > vue技术文章 > vue中子组件向父组件传递数据的实例代码(实现加减功能)

实例分享vue中子组件如何向父组件传递数据

  • 发布时间:
  • 作者:码农之家
  • 点击:160

这篇文章主要知识点是关于vue、子组件、父组件、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js快速入门
  • 类型:Web前端大小:186.6 MB格式:PDF作者:申思维
立即下载

vue中子组件向父组件传递数据的实例代码(实现加减功能)

这里讲解一下子组件向父组件传递值的常用方式。 这里通过一个加减法的实例向大家说明一下,这个的原理。

如下图所示:

当没有任何操作的时候父组件的值是 0

vue中子组件向父组件传递数据的实例代码(实现加减功能)

当点击加号以后父组件的值是 1

vue中子组件向父组件传递数据的实例代码(实现加减功能)

当点击减号以后父组件的值是减一变成 0

vue中子组件向父组件传递数据的实例代码(实现加减功能)

具体代码我直接贴出来,刚出炉的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>子组件将数据传递给父组件</title>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
//定义一个组件
Vue.component('counter', {
 template: '\
    <div >\
        <div>这里是子组件里面的内容!</div>\
        <div ></div>\
        <div>\
          <span >加法运算</span><button @click="incrementCounter">+</button>\
        </div>\
        <div>\
          <span >减法运算</span><button @click="deleteCounter">-</button>\
        </div>\
    </div>\
  ',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  incrementCounter: function () {
   this.counter += 1;
   this.$emit('increment',1);
  },
  deleteCounter: function () {
   this.counter -= 1;
   this.$emit('increment',2);
  }
 }
})
//执行一个组件
window.onload = function(){
  var app = new Vue({
    el: '#app',
    data: {
      total: 0
    },
    methods:{
      incrementTotal: function (val) {
        if(val==1){
          this.total += 1;
        }else{
          if(this.total<=0){
            this.total = 0;
          }else{
            this.total -= 1;
          }
        }
      }
    }
  })
}
</script>
<body>
  <div id="app" >
    <p>这里是父组件里面的内容!</p>    
    <p>子组件传递的值:<b>{{ total }}</b></p>
    <counter v-on:increment="incrementTotal"></counter>
  </div>
</body>
</html>

总结

以上所述是小编给大家介绍的vue中子组件向父组件传递数据的实例代码(实现加减功能) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.770035

vue的props实现子组件随父组件一起变化

本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下 类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时,也会传导给子组件: div input v-model="parentMsg" br child v-bind:my-message="parentMsg"/child/div 使用 v-bind 的缩写语法通常更简单 :child :my-message="parentMsg"/child 实例: !DOCTYPE htmlhtml lang="en"head script type="text/javascript" src="vue.js"/script meta charset="UTF-8" titlevue的props实现父组件变化子组件一起变化/title/headbodydiv id="app1" input v-model="messsage" !--input绑定实例中data中的message-- div child v-bind:my-message="messsage"/child !--子组件绑定实例中data中的message-- /div/div script Vue.config.debug = true; Vue.component('child',{ props: ['myMessage'], //VUE实例中myMessage 等价于my-message template: 'span{{ myMessage }}/spanbr……

网友NO.523811

图文介绍Vue父组件向子组件传值

1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属性绑定并赋值给子组件 5:子组件通过 props 接收父组件传递过的数据 6:查看 7:总结: 子组件在props中创建一个属性,用以接收父组件传过来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性 ……

网友NO.888297

vue父组件向子组件传递多个数据的实例

在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去 这里主要看一下动态的数据绑定。比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后 传递给子组件。 但是有一个问题,假如你有两个数据,一个对象,一个数组,需要同时从父组件传递给子组件,你会怎么办? 这里就通过一个例子来说明一下: 子组件的JS /** * 收货地址组件 马优晨 **/define(function(require, exports, module){ var $ = require("lib_cmd/zepto-cmd"), Vue = require('lib_cmd/vue-cmd'), main = require("js_cmd/main-cmd"), var vm= Vue.component('myaddress', { template: '\ div data-role="data-widget" ……

网友NO.815503

Vue中父组件向子组件通信的方法

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述。下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的。子组件的模板中是无法直接调用父组件的数据。 可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props 看下面的例子 div id="app" panda here='China'/panda/divscript src="https://unpkg.com/vue/dist/vue.js"/scriptscript src="https://unpkg.com/vue-router/dist/vue-router.js"/scriptscript Vue.component('panda',{ props:['here'], template:`divpanda from {{here}}/div` }) new Vue({ el: '#app' })/script 页面上展示的是 panda from China 处理属性中带'-‘的问题 Vue是不支持带杠的写法的。 如果上述的here变成from-here。需要这样写(小驼峰的写法) div id="app" panda from-here='China'/panda/divscript Vue.component('panda',{ props:['fromHere']……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com