【vue】$parent $children

徐智渊
2023-12-01

代码演示:

son:

<template>
    <div>son
      <button @click="func1">son点击</button>
    </div>
</template>

<script>
    export default {
        name: "son",
        data(){
            return{
                son:'123'
            }
        },
        methods:{
            func1(){
                console.log(this.$parent.name)  // ssss
            }
        }

    }
</script>

<style scoped>

</style>

father

<template>
    <div>fahter
        <son></son>
        <button @click="func">father点击</button>
    </div>
</template>

<script>
    import son from './son'
    export default {
        name: "father",
        components:{
            son
        },
        data(){
            return{
                name:"ssss"
            }
        },
        mounted(){

        },
        methods:{
            func(){
                console.log(this.$children[0].son) //123
            }
        }
    }
</script>

<style scoped>

</style>

 类似资料: