vue父子组件的通信方法(实例详解)


Posted in Javascript onNovember 10, 2019

vue父子组件的通信方法(实例详解)

一、父组件向子组件传递数据

1、首先形成父子组件关系

 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="../js/vue.js"></script>
</head>
<body>
 <div id="app">
 </div>
 <template id="cpn">
  <div>
   <h2>{{cmovies}}</h2>
   <p>{{cmessage}}</p>
  </div>
 </template>
 <script>
  const cpn = {
   template: `#cpn`,
   data() {
    return {}
   },
   methods: {}
  }
  let vm = new Vue({
   el: '#app',
   data: () => ({
    message: '父组件的数据',
    movies: ['战狼1', '流浪地球', '攀登者']
   }),
   components: {
    cpn
   }
  })
 </script>
</body>
</html>

2、在子组件中定义一个props,定义两个变量 (messages) (moviess)

props: ['messages', 'moviess']

3、使用子组件时,用V-bind绑定两个变量(messages) (moviess),并且把父组件中的数据(message)(movies)传给这两个变量。

 

<cpn :messages="message" :moviess="movies"></cpn>
<!-- 不支持驼峰命名法 大写字母之间用 - 隔开 -->

****完整代码*****

 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="../js/vue.js"></script>
</head>
<body>
 <div id="app">
  <cpn :messages="message" :moviess="movies"></cpn>
  <!-- 不支持驼峰命名法 大写字母之间用 - 隔开 -->
 </div>
 <!-- 父传子 -->
 <!-- 
  1、建立父子关系
  2、在子组件中定义一个props,定义两个变量 (messages) (moviess)
  3、使用子组件时,用V-bind绑定两个变量,并且把父组件中的数据(message)(movies)传给这两个变量。
  -->
 <template id="cpn">
  <div>
   <h2>{{messages}}</h2>
   <ul>
    <li v-for="item in moviess">
     {{item}}
    </li>
   </ul>
  </div>
 </template>
 <script>
  const cpn = {
   template: `#cpn`,
   // props: ['messages', 'moviess'],
   props: {
    // 1、类型限制
    // messages:Array,
    // moviess:String,
    // 提供一些默认值
    messages: {
     type: String,
     default: 'aaaa',
     required: true
    },
    // 当使用组件的时候,没有绑定props中定义的变量,就会显示定义的默认值
    moviess: {
     // 类型是对象或数组,默认值必需是一个函数。 
     type: Array,
     // default: []
     default() {
      return []
     }
    }
   },
   data() {
    return {}
   },
   methods: {}
  }
  let vm = new Vue({
   el: '#app',
   data: () => ({
    message: '父组件的数据',
    movies: ['战狼1', '流浪地球', '攀登者'],
   }),
   components: {
    cpn
   }
  })
 </script>
</body>
</html>

** props中补充写法

 

props: {
    // 1、类型限制
    // messages:Array,
    // moviess:String,

    // 提供一些默认值
    messages: {
     type: String,
     default: 'aaaa',
     required: true
    },
    // 当使用组件的时候,没有绑定props中定义的变量,就会显示定义的默认值
    moviess: {
     // 类型是对象或数组,默认值必需是一个函数。 
     type: Array,
     // default: []
     default() {
      return []
     }
    }
   }

 二、子组件向父组件传数据

1、构成父子组件关系

 2、在子组件中自定义一个事件      作用:发射一个事件给父组件

<button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
   methods: {
    btnclick: function (item) {
     // 发射事件:自定义事件
     this.$emit('itemclick', item)
    }
   }

3、在父组件的模板中使用子组件中定义的事件 @itemclick="cpnclick"   并且在父组件创建一个新的事件 cpnclick

<cpn @itemclick="cpnclick"></cpn>
   methods: {
    cpnclick: function (item) {
     console.log('cpnclick', item)
    }
   }

***完整代码***

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="../js/vue.js"></script>
</head>
<!-- 父组件模板 -->
<div id="app">
 <cpn @itemclick="cpnclick"></cpn>
</div>
<!-- 
 1、构成父子组件关系
 2、在子组件定义一个事件,作用是 发射一个事件给父组件。this.$emit('itemclick')
 3、在父组件的模板中使用子组件中定义的事件 @itemclick="cpnclick" ,并且在父组件创建一个新的事件 cpnclick ,
 这里面可以写传给父组件数据的逻辑以及限制
 -->
<body>
 <!-- 子组件模板 -->
 <template id="cpn">
  <div>
   <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
  </div>
 </template>
 <script>
  // 子组件
  const cpn = {
   template: `#cpn`,
   data() {
    return {
     categories: [
      { id: 'aa', name: '热门推荐' },
      { id: 'bb', name: '手机数码' },
      { id: 'cc', name: '智能家居' },
      { id: 'dd', name: '美容美发' }
     ]
    }
   },
   methods: {
    btnclick: function (item) {
     // 发射事件:自定义事件
     this.$emit('itemclick', item)
    }
   }
  }
  // 父组件
  let vm = new Vue({
   el: '#app',
   data: () => ({}),
   components: {
    cpn
   },
   methods: {
    cpnclick: function (item) {
     console.log('cpnclick', item)
    }
   }
  })
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的vue父子组件的通信方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery delay()介绍及使用指南
Sep 02 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 #Javascript
vue-父子组件和ref实例详解
Nov 10 #Javascript
vue $set 给数据赋值的实例
Nov 09 #Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 #Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 #Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 #Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python中cPickle用法例子分享
2014/01/03 Python
python动态监控日志内容的示例
2014/02/16 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
python中操作文件的模块的方法总结
2021/02/04 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
汽车技术服务英文求职信范文
2014/01/02 职场文书
职务聘任书范文
2014/03/29 职场文书
委托书范本
2014/04/02 职场文书
人事经理岗位职责
2014/04/28 职场文书
单位工作证明书格式
2014/10/04 职场文书
黄河绝恋观后感
2015/06/08 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书