vue中父子组件的参数传递和应用示例


Posted in Vue.js onJanuary 04, 2021

1.在父组件中调用子组件,父亲传值给子组件

子组件如下,把要传给给父亲的值放在props中

template>
  <!--底部导航-->
  <div class="index-bbar">
    <ul class="flex" >
      <li v-for="(item,index) in liAry" :class="index==licurrent?'active':''">
       <router-link :to="item.linkURl">
        <span class="flex alignc flexdc">
          <img :src="index==licurrent?require('../../' + item.urlActive):require('../../' + item.url)" class="img1" ><span>{{item.title}}</span>
        </span>
       </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
 name: 'Bottom',
 data () { 
  return {
    
  }
 },
 props:['liAry','licurrent'],
 methods: {

 }
}
</script>
<style scoped>
@import "../../assets/public/css/top.css";
@import "../../assets/public/css/bottom.css";
</style>

父组件的调用的三部曲

首先引入子组件

import Bottom from '@/components/public/Bottom';

注入组件在components中注入

components: {Bottom}

在父亲中应用

<template>
<Bottom v-bind:liAry='lidata' v-bind:licurrent='guidecurrent'></Bottom>
</template>

到这里就结束了,是不是贼快

2.子组件传值给父组件

父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。

<!-- 父组件 -->
<template>
  <div class="test">
   <test-com @childFn="parentFn"></test-com>
   <br/> 
   子组件传来的值 : {{message}}
  </div>
</template>

<script>
export default {
  // ...
  data: {
    message: ''
  },
  methods: {
    parentFn(payload) {
    this.message = payload;
   }
  }
}
</script>

子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件

<!-- 子组件 -->
<template> 
<div class="testCom">
  <input type="text" v-model="message" />
  <button @click="click">Send</button>
</div>
</template>
<script>
export default {
  // ...
  data() {
    return {
     // 默认
     message: '我是来自子组件的消息'
    }
  },
  methods: {
   click() {
      this.$emit('childFn', this.message);
    }
  }  
}
</script>

在子组件向父亲传值的时候,不可用router-link,不然接受不到父亲定义的函数

以上就是vue中父子组件的参数传递和应用示例的详细内容,更多关于vue中父子组件的参数传递的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
对vue生命周期的深入理解
Dec 03 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 #Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 #Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 #Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 #Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 #Vue.js
vue中使用echarts的示例
Jan 03 #Vue.js
vue 动态生成拓扑图的示例
Jan 03 #Vue.js
You might like
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
详解Python3中yield生成器的用法
2015/08/20 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
纺织工程专业个人求职信范文
2014/01/27 职场文书
家长会主持词开场白
2014/03/18 职场文书
任命书格式
2014/06/05 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
大学推普周活动总结
2015/05/07 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
大学生支教感言
2015/08/01 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript