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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
JavaScript+HTML实现学生信息管理系统
Apr 20 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php max_execution_time执行时间问题
2011/07/17 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP单链表的实现代码
2016/07/05 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
详谈javascript异步编程
2016/02/21 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
Python字典dict常用方法函数实例
2020/11/09 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
python 实现逻辑回归
2020/12/30 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
大学军训感想
2014/02/12 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
获奖感言一句话
2015/07/31 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL