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编程起步(第五课)
Jan 10 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jQuery插件制作的实例教程
May 16 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
Javascript执行流程细节原理解析
May 14 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中array_merge与array+array的区别
2013/06/21 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
express express-session的使用小结
2018/12/12 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
会计专业毕业生自我鉴定
2013/10/29 职场文书
结婚纪念日感言
2015/08/01 职场文书
交通安全学习心得体会
2016/01/18 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android