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

Bertha 。 2022-03-30 09:54 499阅读 0赞

> **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>

**效果图**

![20190605112738223.gif][]

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

> **欢迎来访[我的vue专栏总篇][vue]博客**

希望能够帮助到你

over

[20190605112738223.gif]: /images/20220330/53ad6e62b1f846568e213320ce1947e3.png
[vue]: https://blog.csdn.net/qq_41402200/article/details/84390947