vue-子组件向父组件传值

具体案例

当前设计了一个页面，上部分是由父组件组成，下半部分是由子组价组成；当前子组件触发一个事件完成后，要实现父组件页面的刷新，要明白的一点是前端主要是靠数据驱动来实现页面的刷新。为了解决上述问题，我们可以使用下面具体的这个方法。

1.父组件页面fu…vue

<template>
<div>
        <div class="optionDiv" >
            <div v-if="num == 0">
                <jkl-zi @setSelfDefineQuXian="setSelfDefineQuXian"></jkl-zi>
            </div>
        </div> 
</div>
</template>

<script>
import { request } from "@/common/api"
import  jklZi from "./jkl/zi"

export default {
    name: "",
    components: {
    },
    props: {},
    data() {
        return { 
          setNewQuXianSuccess: false,   // false 表示失败, true表示成功
        },  
    },
   
    watch: {
    //监听事件的主要目的监听之前子组件赋值的变量，
    // 如果传递过来的值为success,则执行refresh（）这个函数，
    //而这个函数中请求的接口，就是每次进入父组件时请求数据的接口。
        setNewQuXianSuccess: {
            handler: function(newV) {
                if (newV == true) {
                    this.refresh()    
                }
                this.setNewQuXianSuccess = false
            },
            immediate: true
        }
    },
    computed: {},
    methods: {
    //上面子组件的触发事件定义的函数
    setSelfDefineQuXian(isSuccess) {
           //子组件传递的参数赋值给setNewQuXianSuccess，将data中的这个变量的初始值改变了
            this.setNewQuXianSuccess = isSuccess     
         },
        async refreshCharts() {
            request()     //这里是一个请求的接口，已经封装好了
            .then(res => {
                if (res.data.status == "success") {  
                    }  
            .catch(err => {
                console.log(err)
            })
        }

    created() {
        //请求数据的函数
        this.refresh()
        
    },
    mounted() {},  
}
</script>

<style lang="scss" scoped>

</style>

2.子组件在jkl文件下的zi.vue

//子组件页面这里只给出其接口的里面实现参数传递的部分
this.$emit("setSelfDefineQuXian", true)
//setSelfDefineQuXian这是在之前的父组件中已经说明的触发事件
//将这个success的状态值传递给父组件，通过这个Boolean实现对父组件页面的刷新