详解vue.js2.0父组件点击触发子组件方法


Posted in Javascript onMay 10, 2017

之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了

<body> 
  <div id="counter-event-example"> 
   <p>{{ total }}</p> 
   <button-counter v-on:ee="incrementTotal"></button-counter> 
   <button-counter v-on:ee="incrementTotal"></button-counter> 
  </div> 
 
  <script> 
    Vue.component('button-counter', { 
     template: '<button v-on:click="increment">{{ counter }}</button>', 
     data: function () { 
      return { 
       counter: 0 
      } 
     }, 
     methods: { 
      increment: function () { 
       this.counter += 1 
       this.$emit('ee', 'cc' ) 
      } 
     }, 
    }) 
    new Vue({ 
     el: '#counter-event-example', 
     data: { 
      total: 'arg' 
     }, 
     methods: { 
      incrementTotal: function (b) { 
       this.total = b + '1'; 
      } 
     } 
    }) 
  </script> 
</body>

子组件通过$emit触发父组件的事件,$emit后面的参数是向父组件传参,注意,父组件的事件处理函数直接写函数名即可,不要加(),参数直接传递到了父组件的methods的事件处理函数了。

另外,写一个小拾遗。vue子组件用了定义模板组件功能,然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。

再说一个非常方便的v-ref

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <script src="vue.js"></script> 
</head> 
<body> 
<div id="parent">  
  <input type="text" name="" id="" v-model="msg" /> 
  <input type="button" id="" value="dianji" @click="clickDt" /> 
  <user-profile ref="profile"></user-profile>  
</div>  
  
<script>  
  Vue.component('user-profile', {  
    template: '<span>{{ msg }}</span>',  
    data: function () {  
      return { 
        msg: 123 
      }; 
    },  
    methods: {  
      greet: function (msg) {  
        console.log(msg);  
      }  
    }  
  
  })  
//   var parent = new Vue({el: '#parent'});  
//   var child = parent.$refs.profile;  
//   child.greet();  
  new Vue({ 
    el:"#parent", 
    data:{ 
      msg:"" 
    }, 
    methods: { 
        clickDt(){ 
        this.$refs.profile.greet(this.msg); 
      } 
    } 
  }) 
</script>  
</body> 
</html>

Vue2.0组件间数据传递

Vue1.0组件间传递

  1. 使用$on()监听事件;
  2. 使用$emit()在它上面触发事件;
  3. 使用$dispatch()派发事件,事件沿着父链冒泡;
  4. 使用$broadcast()广播事件,事件向下传导给所有的后代

Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 

1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件上。

父组件:

<template>
 <div>
  <input type="text" v-model="msg">
  <br>
  //将子控件属性inputValue与父组件msg属性绑定
  <child :inputValue="msg"></child>
 </div>
</template>
<style>

</style>
<script>
 export default{
  data(){
   return {
    msg: '请输入'
   }
  },
  components: {
   child: require('./Child.vue')
  }
 }
</script>

子组件:

<template>
 <div>
  <p>{{inputValue}}</p>
 </div>
</template>
<style>

</style>
<script>
  export default{
    props: {
     inputValue: String
    }
  }
</script>

2,子组件向父组件传值场景:子组件上输入框,输入值改变后父组件监听到,弹出弹框

 父组件:

<template>
 <div>
//message为子控件上绑定的通知;recieveMessage为父组件监听到后的方法
  <child2 v-on:message="recieveMessage"></child2>
 </div>
</template>
<script>
 import {Toast} from 'mint-ui'
 export default{
  components: {
   child2: require('./Child2.vue'),
   Toast
  },
  methods: {
   recieveMessage: function (text) {
    Toast('监听到子组件变化'+text);
   }
  }
 }
</script>

子组件: 

<template>
 <div>
  <input type="text" v-model="msg" @change="onInput">
 </div>
</template>
<script>
 export default{
  data(){
   return {
    msg: '请输入值'
   }
  },
  methods: {
   onInput: function () {
    if (this.msg.trim()) {
     this.$emit('message', this.msg);
    }
   }
  }
 }
</script>

vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件

父组件数据如何传递给子组件呢?可以通过props属性来实现

父组件:

<parent>
  <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>

data(){
  return {
    msg: [1,2,3]
  };
}

子组件通过props来接收数据:

方式1:

props: ['childMsg']

方式2 :

props: {
  childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告
}

方式3:

props: {
  childMsg: {
    type: Array,
    default: [0,0,0] //这样可以指定默认的值
  }
}

这样呢,就实现了父组件向子组件传递数据.

2.子组件与父组件通信

那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.

子组件:

<template>
  <div @click="up"></div>
</template>

methods: {
  up() {
    this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据
  }
}

父组件:

<div>
  <child @upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
</div>
methods: {
  change(msg) {
    this.msg = msg;
  }
}

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信.

所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.

let Hub = new Vue(); //创建事件中心

组件1触发:

<div @click="eve"></div>
methods: {
  eve() {
    Hub.$emit('change','hehe'); //Hub触发事件
  }
}

组件2接收:

<div></div>
created() {
  Hub.$on('change', () => { //Hub接收事件
    this.msg = 'hehe';
  });
}

这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
详解vue-router 2.0 常用基础知识点之router-link
May 10 #Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 #Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
关于vue-router路径计算问题
May 10 #Javascript
You might like
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python如何求解两数的最大公约数
2018/09/27 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
户外拓展活动方案
2014/02/11 职场文书
毕业横幅标语
2014/10/08 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
公司开业主持词
2015/07/02 职场文书
教师素质教育心得体会
2016/01/19 职场文书
销售会议开幕词
2016/03/04 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
MySQL三种方式实现递归查询
2022/04/18 MySQL