学习记录：父子组件通信

父子组件通信一般为父组件向子组件传值，子组件通过事件向父组件传值
看到一篇很好的文章，分享一下点击此处查看组件通信方式解析
文章描述的很清晰，首先是在父组件中引入子组件并且注册子组件，然后引用。
1、父组件向子组件传值
在完成引入注册与引用之后，将需要传递的值写入
父组件中需要的操作如下：
此处是父组件中需要传递的值

  data() {
        return {
            risks: [
                { name: '饮食', id: '1' },
                { name: '运动', id: '2' }
            ]
            }     

此处是父组件中引用子组件之后将所需要传递给子组件的值命名，方便子组件调用，此处将命名设为risks

<childRisk :risks="risks"></childRisk>

以下为子组件中需要进行的操作：
子组件通过props接收父组件传递的值，接收父组件中对于数组的命名risks，并且需要写入接收的值的类型，此处type为Array，默认值default此处设为空值[]。

export default {
    name: 'childRisk',
    props: {
        risks: {
            type: Array,
            default: () => []
        }
    }
    }

子组件对父组件的值进行遍历

 <div class="try">
        <ul>
            <li v-for="item in risks" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>

即可完成父组件向子组件传值
2、子组件通过事件向父组件传值
首先也是父组件import引入，component中注册，然后组件引用之后，在组件中先将事件传递过来，此处传递的事件命名要与子组件中传递出来的事件名称保持一致
以下是父组件中需要进行的操作：

<childRisk @tipChange="newChange"></childRisk>//tipChange即是与子组件传递出的事件命名一致，然后在父组件中将方法命名为NewChange，在methods中定义该方法
                <h2>{{ tip }}</h2>

 data() {
        return {
            tip: '我是父组件内容'
            }
        }

//在methods中定义该方法
 newChange(m) {
            this.tip = m
        },

以下是子组件中需要进行的操作：
首先定义点击事件为tryClick，需要点击的内容为子组件中定义的tip 中的内容

<h2 @click="tryClick">{{ tip }}</h2>

tip中内容设置如下：

 data() {
        return {
            tip: '点击此处变化'
        }
    }

通过$emit将事件从子组件传递到父组件
定义子组件点击方法tryClick需要传递出去的事件的命名tipChange ，此处要与父组件接收的事件名保持一致，然后第二个位置是触发事件之后需要传递的值

  methods: {
        tryClick() {
            this.$emit('tipChange', '我是子组件的tip')
        }
    },

操作完成
3、以上我们所讲的子组件向父组件传递事件只是传递的最简单的字符串，但是实际中我们较多使用的是传递对象，所以下边我将记录一下对于传递事件传递的若是对象该如何操作
以下是父组件中需要进行的操作：
在引入注册应用组件之后，将子组件中传递过来的事件changeTip接收过来命名为handleTip，将list传递到子组件，initKey是向子组件传递list中的key值，为了实现能循环遍历

<template>
    <div>
        <childFawn @changeTip="handleTip" :list="list" :initKey="key"></childFawn>
        <h2>{{ tip }}</h2>
    </div>
</template>

List定义为下：tip赋值为空，为了让tip中显示List中的值

    data() {
        return {
            list: ['123', '456', '789', '101112', '131415'],
            tip: '',
            key: 0
        }
    },

定义传递过来的事件如下，randomNum是定义了让数字进行随机显示

   methods: {
        randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10)
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
                default:
                    return 0
            }
        },
        handleTip(e) {
            this.tip = e.name
        }
    },

这里是设置让初始数据随机显示，然后实现tip与与list的联系，让tip中显示list数组中的内容，之前我们将tip设置为空也是为了让tip只显示List中的内容。

  created() {
        this.key = this.randomNum(0, this.list.length - 1)
        this.tip = this.list[this.key]
    },

以下是子组件中的操作:
首先将点击事件设置为childPress，并在methods中定义

<template>
    <div>
        <div @click="childPress">
            <h2>{{ press }}</h2>
        </div>
    </div>
</template>



methods: {
        childPress() {
            let length = this.list.length - 1
            if (length < 0) {
                return
            }
            let index = this.activeKey
            this.activeKey = index < length ? index + 1 : 0 //实现循环遍历
            this.$emit('changeTip', { name: this.list[this.activeKey] })//使用$emit将childPress事件传递到父组件，，命名为changeTip，此处与父组件接收的事件名保持一致。第二个位置是事件触发时需要变化的值。
            
        }
    }

将h2处需要传递的press定义如下：

 data() {
        return {
            press: '点击我找到子组件tip'
        }
    },

将初始值设置为与父组件传递过来的initKey一致，就可以实现连续转换

   created() {
        this.activeKey = this.initKey
        console.log('this.activeKey:', this.activeKey)
    }

需要将list和initKey接收过来，这里需要注意的时initKey是number类型，默认值不能为空

   props: {
        list: {
            type: Array,
            default: () => []
        },
        initKey: {
            type: Number,
            default: () => 0
        }
    },

到此处已经记录完学习经过~