Vue父组件访问子组件和子组件访问父组件

最新推荐文章于 2024-01-20 10:00:00 发布

楠溪泽岸

最新推荐文章于 2024-01-20 10:00:00 发布

阅读量384

点赞数 2

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51603875/article/details/125508617

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

Vue父组件访问子组件和子组件访问父组件
一、父组件访问子组件
二、子组件访问父组件
总结

Vue父组件访问子组件和子组件访问父组件

主要记录父组件访问子组件和父组件访问子组件的简单使用

一、父组件访问子组件

访问父组件用this.refs.(ref中的内容)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件访问子组件</title>
</head>
<body>
    <div id="app">
    	<!--
            给子组件一个ref="box1"
        -->
        <b-box ref="box1"></b-box>
        <!--
            这里在父组件中写了一个按钮
            点击时调用函数
            在函数中使用this.$refs.box1就可访问子组件中的数据
            例：this.$refs.box1.msg可以得到里面的内容
        -->
        <button v-on:click="getChildComponent">获取子组件</button>
    </div>

    <template id="box">
        <div style="background-color: pink;width: 200px;height: 200px">
            <button v-on:click="btnClick">Click Me</button>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        const Box = {
            data(){
                return{
                    msg:'你好Java'
                }
            },
            methods:{
                btnClick(){
                    alert("你点击了按钮");
                }
            },
            template:'#box'

        }
        
        const app = Vue.createApp({
            data(){
                return{
                    msg:'基础模板'
                }
            },
            components:{
                'b-box':Box
            },
            methods:{
            	/*这里使用this.$refs.box1.msg访问了子组件中的内容*/
                getChildComponent(){
                    console.log(this.$refs.box1.msg);
                }
            }
        }).mount("#app");
    </script>
</body>
</html>

二、子组件访问父组件

在下面代码中NXBox作为NXButton的父组件
Vue实例app类似于NXBox的父组件，类似于NXButton的根组件
访问父组件用this.$parent，访问子组件用this.$root

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件访问父组件</title>
</head>
<body>
    <div id="app">

        <nx-box></nx-box>
    </div>

    <template id="NXButton">
            <button v-on:click="btnClick">You click the button {{count}} times</button>
    </template>

    <template id="NXBox">
        <div style="background-color: mediumpurple;width: 200px;height: 200px">
            <nx-button></nx-button>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        const NXButton = {
            data() {
                return{
                    count:0
                }
            },
            template:'#NXButton',
            methods:{
                btnClick(){
                    this.count++;
                    //1、子组件访问父组件内容
                    alert(this.$parent.msg);
                    console.log(this.$parent.msg);
                    //2、子组件访问根组件内容
                    alert(this.$root.msg);
                    console.log(this.$root.msg);
                }
            }
        }
        const NXBox = {
            data(){
                return{
                    msg:'这是父组件的内容'
                }
            },
            components:{
                'nxButton':NXButton
            },
            template:'#NXBox'
        }
        const app = Vue.createApp({
            data(){
                return{
                    msg:'这是根组件内容'
                }
            },
            components:{
                'nxBox':NXBox
            }
        }).mount("#app");
    </script>
</body>
</html>