vue中子父组件传值

就学这一遍

在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
首先你得有子父组件，并将子组件进行引用
************ 父给子传值 ************
父组件

<template>
    <div class="parent">
        <div class="content">
            这是父页面
            <span @click="sendMes">传值</span> <!-- 1 点击按钮传值 -->
        </div>
        <child @func="getage" :fatherQuill="name"></child><!-- 3 数据发生改变进行传递 -->
    </div>
</template>

<script>
    import child from '../components/child'
    export default {
        data() {
            return {
               name: undefined, 
               age: undefined
            }
        },
        components: {
            child,
        },
        methods: {
            sendMes() { // 2 赋值
                this.name = '哈哈哈'
            },
            getage(data) {
                this.age = data;
            }
        },
    }
</script>

子组件

<template>
    <div>
        <span @click="sendBtn">按钮</span>
        <span class="nameBox"> {{fatherQuill}}</span> <!-- 将接收的值进行渲染 -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                age: 18
            }
        },
        props: ['fatherQuill'], // 接收值
        methods: {
            sendBtn() {
                this.$emit('func', this.age)
            }
        },
    }
</script>

<style lang="less" scope>
    .nameBox {
        font-size: 30px;
    }
</style>

************ 子给父传值 ************
子组件

<template>
    <div>
        <span @click="sendBtn">按钮</span> <!-- 1. 点击按钮 -->
        <span class="nameBox"> {{fatherQuill}}</span>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                age: 18
            }
        },
        props: ['fatherQuill'],
        methods: {
            sendBtn() {
            	// func 为函数  this,age 为参数
                this.$emit('func', this.age); 
            }
        },
    }
</script>

<style lang="less" scope>
    .nameBox {
        font-size: 30px;
    }
</style>

父组件

<template>
    <div class="parent">
        <div class="content">
            这是父页面
            <span @click="sendMes">传值</span>
            获取大子组件的值{{age}}
        </div>
        <!--  将子组件函数名进行绑定 因为是函数 所以得有方法接收 咱们使用getage接收 -->
        <child @func="getage" :fatherQuill="name"></child>
    </div>
</template>

<script>
    import child from '../components/child'
    export default {
        data() {
            return {
               name: undefined, 
               age: undefined
            }
        },
        components: {
            child,
        },
        methods: {
            sendMes() {
                this.name = '哈哈哈'
            },
            getage(data) {
                this.age = data; // 将接收的值进行赋值渲染
            }
        },
    }
</script>