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 相关文章推荐
农历与西历对照
Sep 06 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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扩展函数
2006/10/09 PHP
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
php自动加载的两种实现方法
2010/06/21 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
13个PHP函数超实用
2015/10/21 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
python实现最长公共子序列
2018/05/22 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
高中生期末评语大全
2014/01/28 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js