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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
wxPython实现整点报时
2019/11/18 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
化学系大学生自荐信范文
2014/03/01 职场文书
建设工程授权委托书
2014/09/22 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
河童之夏观后感
2015/06/11 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
nginx内存池源码解析
2021/11/20 Servers
python三子棋游戏
2022/05/04 Python