vue --- 模块从子组件获取数据

先看个一般的例子:

// 我们需要将信息从子组件传递给父组件,(有可能不止一条信息,因此)肯定需要一个标识,这个标识放在$emit里面(js),在dom中通过@来关联父元素。如下:<div id = "app"><transfer @connect="sayConnect" @build="sayBuild"></transfer>
</div>// js
<script>Vue.component('transfer',{template:'<button @click="send1">发送connect</button><br>'+'<button @click="send2">发送build</button>',methods:{send1(){this.$emit('connect');},send2(){this.$emit('build');}}});// 子组件注册了2个方法,send1和send2,点击send1发送connect,点击send2发送build.// @connect="sayConnect",  connect对应子组件中this.$emit('connect').sayConnect对应父组件的sayConnect方法,下面写出来.// 注意,在子模版中,按钮的绑定使用的是@而不是:let vm = new Vue({el:"#app",methods:{sayConnect(){console.log('connect success!');},sayBuild(){console.log('build success');}}});
</script>

接下来,看个更复杂一点的例子:

假设我们希望:

点击"+1",总数加1;点击"-1"总数减1. 且数据是来自子组件…

首先写html

<div id = "app"><p>总数 {{ total }} </p><my-component @increase="handleTotal" @reduce="handleTotal"> </div>
</div>
// 说明: total 是父元素的
// @increase 对应 子组件中的 $emit('increase', data);
// @reduce 对应 子组件中的 @emit('reduce', data);
// handleTotal对应父组件中methods方法中的 handleTotal方法

挂载Vue,注册组件

<script>// 组件应该在vue挂载之前注册Vue.component('my-component',{                      // 第一个参数组件名,对应html中的<my-component></my-component>// 首先写替换<my-component>的templatetemplate:'\<div>\<button @click = "handleIncrease"> +1 </button>\<button @click = "handleReduce">-1 </button>\<div>',// ps: template中 写了2个点击事件 handleIncrease 和 handleReduce , 由于要传一个数据给父元素,我们定义如下:data: function (){return {counter: 0;}},    // 子元素中的counter 初始化为0methods: {handleIncrease: function() {this.counter++;this.$emit('increase', this.counter);},handlerReduce: function() {this.counter--;this.$emit('reduce', this.counter);}}}); // 子模块完毕// 说明: $emit(a,data)用来像父元素传递信息, 父元素用@'a'的形式接受信息// 开始挂载vue(在此是父元素).var app = new Vue({el: '#app',data: {total: 0     // 对应html <p>{{total}} </p>},methods:{handleTotal: function (total ){    // total 参数来自于 $emit的第二个参数..this.total = total;            }}})</script>

vue --- 模块从子组件获取数据相关推荐

vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
VUE父组件向子组件传递数据
在使用VUE开发的时候,有时候,我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生,从而导致代码冗余,所以,我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
目录在组件中获取数据二.组件中的data为什么必须要是函数? 父组件给子组件传递数据--props属性第一种写法: 第二种写法: 第三种写法: 传默认值 : 父组件传子组件数据--引用类型的两种 ...
浅入深出Vue：子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vue.js：父组件向子组件传递数据props
笔记代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><meta na ...

vue --- 模块从子组件获取数据

首先写html

挂载Vue,注册组件

vue --- 模块从子组件获取数据相关推荐

最新文章

热门文章