在vue中实现父组件调用子组件以及传值

vue的组件化思想：java中，我们常常将共用部分放入一个单独的类中，并称它们为工具类，这样不仅可以减少代码的冗余，并且在维护上也大大提高了效率。当然，在vue中也有类似的处理，就是组件（Component）；组件是vue最强大的功能之一，可用来封装重用的代码。

哪些场景适合

如订单有多种状态，使用标签页，每一页查询一种订单状态的数据，显示数据的表格却是一样的，这时就可以用到组件来封装共同的表格部分了。

vue 代码

父组件 - 逐个分析

1. 父组件 - Tabs 标签页

<el-tabs style='margin-top:15px;' v-model="activeNameChild" @tab-click="handleClick"><el-tab-pane v-for="(item,index) in tabMapOptionsChild" :label="item.label" :key='item.type' :name="item.type"><keep-alive><orderChild :type="item.type"></orderChild></keep-alive></el-tab-pane>
</el-tabs>

页面主要内容就是两个Tabs 标签页（演示两种不同引入子组件的方式）

<el-tabs> -> v-model：当前选择 tab-pane 页的name 属性值，通常用来指定页面加载时 Tabs 标签页的默认选择
<el-tabs> -> @tab-click：tab 被选中时触发的方法
<el-tab-pane>：每个单独的选项卡，这里使用 v-for 遍历循环出多个选项卡
<el-tab-pane> -> label：选项卡标题（显示在页面上的文字）
<el-tab-pane> -> name：与选项卡 activeName 对应的标识符，表示选项卡别名（隐藏的文字）
<keep-alive>：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
<orderChild>：引入子组件
<orderChild> -> type：传值到子组件中

2. 父组件 - 引入子组件

// 引入子组件
import child from './components/child'
import son from './components/son'

3. 父组件 - 输出本模块

export default {name : 'OrderParent',components : { orderChild:child,orderSon:son },data(){return {activeNameChild: 'daishenhe',activeNameSon: 'fukuanzhong',tabMapOptionsChild:[{label:'待审核',type:'daishenhe'},{label:'审核中',type:'shenhezhong'},{label:'已审核',type:'yishenhe'},{label:'其他'}],tabMapOptionsSon:[{label:'待付款',type:'daifukuan'},{label:'付款中',type:'fukuanzhong'},{label:'已付款',type:'yifukuan'},{label:'其他'}],}},created(){},mounted(){},methods:{// 点击选择标签页handleClick(tab, event) {// 如果点击了待审核页 触发的方法if(tab.name === 'daishenhe'){}},}
}

name：全局ID，提供更好的调试信息
components：组件，key - value 形式，key 在页面中引入组件时需要，value 是在 import 中引入的组件
data：全局双向绑定的数据
data -> activeNameChild/activeNameSon ：Tabs 标签页加载显示的选项卡
data -> tabMapOptionsChild/tabMapOptionsSon：选项卡集合
methods：方法
methods -> handleClick：点击选项卡后触发的事件

父组件的连贯代码

<template><div class="tab-container"><el-tabs style='margin-top:15px;' v-model="activeNameChild" @tab-click="handleClick"><el-tab-pane v-for="(item,index) in tabMapOptionsChild" :label="item.label" :key='item.type' :name="item.type"><keep-alive><orderChild :type="item.type"></orderChild></keep-alive></el-tab-pane></el-tabs><el-tabs style='margin-top:15px;' v-model="activeNameSon" @tab-click="handleClick"><el-tab-pane v-for="(item,index) in tabMapOptionsSon" :label="item.label" :key='item.type' :name="item.type"><keep-alive><order-son :type="item.type"></order-son></keep-alive></el-tab-pane></el-tabs></div>
</template><script>
// 引入子组件
import child from './components/child'
import son from './components/son'
export default {name : 'OrderParent',components : { orderChild:child,orderSon:son },data(){return {activeNameChild: 'daishenhe',activeNameSon: 'fukuanzhong',tabMapOptionsChild:[{label:'待审核',type:'daishenhe'},{label:'审核中',type:'shenhezhong'},{label:'已审核',type:'yishenhe'},{label:'其他'}],tabMapOptionsSon:[{label:'待付款',type:'daifukuan'},{label:'付款中',type:'fukuanzhong'},{label:'已付款',type:'yifukuan'},{label:'其他'}],}},created(){},mounted(){},methods:{// 点击选择标签页handleClick(tab, event) {// 如果点击了待审核页 触发的方法if(tab.name === 'daishenhe'){}},}
}
</script><style>.tab-container{margin: 0 15px;}
</style>

分别引入了子组件 child 和子组件 son
两种引入方式

① <orderChild> ：在 components 中定义的 key 名称为 orderChild 的组件，引入的是 child 子组件

② <order-son> ：在 components 中定义的 key 名称为 orderSon 的组件，引入的是 son 子组件

驼峰式命名法中从第二个单词开始后面的单词的首字母小写并在前面加一个连接符号

两个 Tabs 标签页分别代表着审核状态和付款状态（data -> tabMapOptionsChild/tabMapOptionsSon）
每一个标签页的选项卡都有四项，前三项都有两个属性，最后一项只有一个属性（为了体现子组件中取不到值时显示设置的默认值）
在 <orderChild> 和 <order-son> 处显示子组件的内容，用 :type 设置传入到子组件中的值（传入的 key 是自定义的，如此处的 key 为 type）

子组件 - 逐个分析（两个子组件除了文件名和全局ID外内容基本一致）

1. 子组件 - 显示的内容

{{type}}

2. 子组件 - 输出本模块

export default {name: 'OrderChild',props : {type: {type:String,default:'OrderChild'}},data(){return{}},created(){console.log(this.type);},activated() {},mounted(){},
}

name：全局ID，提供更好的调试信息
props：获取父组件传入的属性（最好设置属性的类型和默认值）
props -> type：在父组件中引入本组件时，设置的 :type 属性
在本组件的方法中调用父组件传入的值时使用 this.key 的方式，如 created() 方法，在页面加载结束后打印父组件传入进来的值
在本组件的页面中调用父组件传入的值时使用 {{key}} 的方式，如显示的内容区中 {{type}}，在页面中显示父组件传入进来的值

子组件的连贯代码 - child

<template><div>{{type}}</div>
</template><script>
export default {name: 'OrderChild',props : {type: {type:String,default:'OrderChild'}},data(){return{}},created(){console.log(this.type);},activated() {},mounted(){},
}
</script><style></style>

子组件的连贯代码 - son

<template><div>{{type}}</div>
</template><script>
export default {name: 'OrderSon',props : {type: {type:String,default:'OrderSon'}},data(){return{}},created(){console.log(this.type);},activated() {},mounted(){},
}
</script><style></style>

效果图

每一个标签页的选项卡都有四项
前三项都有两个属性，最后一项只有一个属性（为了体现子组件中取不到值时显示设置的默认值）

欢迎来访我的vue专栏总篇博客

希望能够帮助到你

over

在vue中实现父组件调用子组件以及传值相关推荐

Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
vue 父组件调子组件方法_vue父组件调用子组件有哪些方法
这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...
vue 父组件调用子组件方法ref
一.ref被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的$refs对象上 vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.metho ...
vue父组件调用子组件方法报错的解决方法
vue父组件调用子组件方法报错在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件,如下图所示: 子组件中定义的方法: setup() {const getList = () => ...
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件父组件与子组件子组件与父组件它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...
【VUE实战问题记录】Vue 父组件调用子组件的使用方法
Vue前端项目父组件调用子组件的时候,调用方式如下: 父组件 <template><div><child ref="refChild">< ...
react类组件中父组件调用子组件函数
1.自定义事件子组件在 componentDidMount 生命周期里调用父组件的方法将 this 传给父组件 Son import React, { Component } from 'react ...
VUE Element UI 父组件调用子组件方法变量，子组件使用父组件变量
一.父组件调用子组件的方法步骤拆解: (1)父组件:1.渲染调用子组件 2.导入子组件 3.声明子组件变量 4.调用子组件 (2)子组件:1.实现子组件自己的渲染.数据处理功能 2.使用父组件的变量 ...

在vue中实现父组件调用子组件以及传值

哪些场景适合

vue 代码

在vue中实现父组件调用子组件以及传值相关推荐

最新文章

热门文章