一、子组件向父组件传值

• 1、子向父传值 需要用到自定义事件 $emit。

• 2、this.$emit('自定义的事件名')

• 3、当自定义事件触发时，所绑定的函数，就能自动获得这个事件在创建的时候 所写的参数

• 4、一般 子向父传值，自定义事件写在 子组件里面

  
  image.png

• 5、然后在 父组件中 子标签上 触发这个自定义属性

• 6、当触发自定义事件(byval)时，就能获取到自定义事件上所携带的数据(this.cdata)

• 7、父组件中 子组件的标签上触发事件，由于事件的触发 必须绑定函数

  
  image.png

• 8、所以在父组件中我们需要定义一个接收数据的函数，这个函数 可以自动获得 子组件中传递过来的参数(数据)

  
  image.png

二、父组件向子组件传值

• 1、我们可以在子组件中的 props中定义变量

第一种写法有数据类型，type写什么数据类型，就能传递什么数据类型
如果你定义的数据类型不匹配，则会根据设置的数据类型强制转化

image.png

第二种写法 不规定数据类型时，按照下面的写法

image.png

• 2、然后在父组件内使用 子组件props定义的变量传值

image.png

• 3、子组件中可以直接将这个变量当做数据来使用

三、最后子传父、父传子的效果图

image.png

两组件的代码如下

子组件 Child.vue

<template>
    <div id="child">
        <h1>{{ msg }}</h1>
        <button @click="sendData">子向父传值</button>


        <!-- 父组件中的数据 -->
        <h2>{{ abc }}</h2>
        <h3>{{ aaa }}</h3>
    </div>
</template>

<script>
export default {
    name: 'Child',
    data() {
        return {
            msg: '这是子组件',
            cdata : '这是子组件中的数据',
        }
    },
    props : {

        abc : {

            // 定义父组件传递过来的数据类型
            type : String,
            requored : true,

            // 如果你定义的数据类型不匹配，则会根据设置的数据类型强制转化
        }
    },

    // 不规定数据类型时，按照下面的写法
    props: ["abc", 'aaa'],

    
    methods: {
        sendData() {
            console.log(this);
            // 子向父传值 需要用到自定义事件 $emit
            // this.$emit('自定义的事件名')

            // 当自定义事件触发时，所绑定的函数，就能自动获得这个事件在创建的时候 所写的参数

            this.$emit('byval',this.cdata);

        }
    }
}
</script>

<style lang="less" scoped>
#child {
    padding: 10px;
    border: 3px solid #007aff;
    width: 90%;
    height: 400px;
    margin: auto;
}
</style>>

</style>

父组件 Father.vue

<template>
    <div id="father">
        <h1>{{ msg }}</h1>
        <!-- 子组件中的数据 -->
        <h2>{{ data1 }}</h2>

        <!-- 子组件 -->
        <Child :abc="fdata" :aaa="aaa"    @byval="getdata" />
    </div>
</template>

<script>
// 引入子组件
import Child from '@/components/Child.vue';
export default {
    name: 'Father',
    data() {
        return {
            msg: '这是父组件',
            fdata: '这是父组件里面的数据1',
            aaa: '这是父组件里面的数据2',
            data1: '',
        }
    },
    components: {
        Child,
    },
    methods: {
        // 定义一个获取子组件传值的方法
        getdata(datas) {
            // datas 就是子向父传过来的数据
            // 由于函数内的参数 不能直接用于渲染
            // 所以我们需要在父组件的data中 定义一个变量
            // 来接收一下 子组件传递过来的参数
            this.data1 = datas;
        }
    }
}
</script>

<style lang="less" scoped>
</style>>
</style>