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方法调用括号的问题探讨
Jan 24 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 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错误问题分析
2014/05/13 PHP
Yii配置文件用法详解
2014/12/04 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PDO::commit讲解
2019/01/27 PHP
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
JavaScript修改注册表实例代码
2020/01/05 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python中Qslider控件实操详解
2021/02/20 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
联强国际笔试题面试题
2013/07/10 面试题
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
承办会议欢迎词
2014/01/17 职场文书
小学家长会邀请函
2014/01/23 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android