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 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
分享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计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP闭包实例解析
2014/09/08 PHP
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JavaScript之数组(Array)详解
2015/04/01 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
纯javascript版日历控件
2016/11/24 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Python 元类使用说明
2009/12/18 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python递归函数绘制分形树的方法
2018/06/22 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
基于python实现百度翻译功能
2019/05/09 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
python字典排序的方法
2019/10/12 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
超市5.1促销活动
2014/01/15 职场文书
教堂婚礼主持词
2014/03/14 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
社会工作专业自荐信
2014/09/26 职场文书
mysql全面解析json/数组
2022/07/07 MySQL