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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
javascript call方法使用说明
Jan 11 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
浅谈React高阶组件
Mar 28 Javascript
js回文数的4种判断方法示例
Jun 04 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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php微信开发之百度天气预报
2016/11/18 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
javascript 得到变量类型的函数
2010/05/19 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
中专生自荐信
2013/10/12 职场文书
期终自我鉴定
2014/02/17 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
社区文艺活动方案
2014/08/19 职场文书
个人向公司借款协议书
2014/10/09 职场文书
车间统计员岗位职责
2015/04/14 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Python天气语音播报小助手
2021/09/25 Python
SQL Server使用导出向导功能
2022/04/08 SQL Server
Java的Object类的九种方法
2022/04/13 Java/Android
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers