vue组件间通信子与父详解(二)


Posted in Javascript onNovember 07, 2017

接着vue组件父与子通信详解继续学习。

二、组件间通信(子组件传值给父组件)

通过事件的方式来完成数据的传输。

①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值

methods:{
recvMsg:function(msg){

//参数msg就是子组件通过事件出来的数据

}
}

②绑定事件处理函数

事件一般情况 都是自定义事件

<child-component @myEvent="recvMsg"></child-component>

③在子组件触发事件

事件名,值
this.$emit('myEvent',myPhone)
//触发一个叫做myEvent的事件,同时把第二个参数数据传递给事件对应的处理函数

总结:

在Vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信子传父</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </div>
  <script>
    //通过事件的方式传递
    //  绑定 -- 触发
    Vue.component("parent-component",{
      data:function(){
        return {
          sonMsg:""
        }
      },
      methods:{
        //msg参数要拿子传递的值          
        recvMsg:function(msg){
          console.log("父组件接收到子组件的数据"+msg);
          this.sonMsg = msg;

        }
      },
      template:`
        <div>
          <h1>这是父组件</h1>
          <p>子组件传来的数据为:{{sonMsg}}</p>
          <hr/>
          <child-component @customEvent="recvMsg"></child-component>
        </div>
      `
    })
    Vue.component("child-component",{
      methods:{
        sendMsg:function(){
          //来触发绑定给子组件的自定义方法
          //this.$emit("customEvent");第一个参数触发
          //this.$emit("customEvent");第二个参数传值
          this.$emit("customEvent","哈哈哈哈");
        },
      },
      template:`
        <div>
          <h1>这是子组件</h1>
          <button @click="sendMsg">senToFather</button>
        </div>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

在子组件中放上一个input,点击按钮 把用户输入的内容发给父组件

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>子与父之间的通信</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </div>
  <script>
  //创建父组件
    Vue.component("parent-component",{
    //data属性
      data:function(){
        return{
          sonMsg:""
        }
      },
      methods:{
        recvMsg:function(msg){
          this.sonMsg = msg
        }
      },
      template:`
        <div>
          <h1>父组件</h1>
          <h4>子组件传递的数据:{{sonMsg}}</h4>
          <child-component @customEvent="recvMsg"></child-component>
        </div>
      `
    })
    //创建子组件
    Vue.component("child-component",{
      data:function(){
        return {
          myInput:""
        }
      },
      methods:{
        sendMsg:function(){
          this.$emit("customEvent",this.myInput);
        }
      },
      template:`
        <div>
          <h1>子组件</h1>
          <input type="text" v-model="myInput"/>
          <button @click="sendMsg">发送</button>
        </div>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

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

Javascript 相关文章推荐
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 #Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 #Javascript
vue组件父与子通信详解(一)
Nov 07 #Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 #Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 #Javascript
vue中SPA单页面应用程序详解
Nov 07 #Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 #Javascript
You might like
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
灰雀教学反思
2014/04/28 职场文书
社团活动总结书
2014/06/27 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL