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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
js实现九宫格抽奖
Mar 19 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php去掉文件前几行的方法
2015/07/29 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
python 中的int()函数怎么用
2017/10/17 Python
python+opencv识别图片中的圆形
2020/03/25 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
浅析Python面向对象编程
2020/07/10 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
送货司机岗位职责
2013/12/11 职场文书
公务员综合考察材料
2014/02/01 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
四风问题对照检查材料
2014/09/22 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
高中开学感言
2015/08/01 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书