Vue组件通信

最新推荐文章于 2024-04-26 16:47:03 发布

做李的英雄

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量358

点赞数

分类专栏： vue学习笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_52336986/article/details/123315348

版权

vue学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

父组件访问子组件

方法一：通过$children拿到子组件
在父组件中

console.log(this.$children);

方法二：通过给子组件加ref（我理解为给子组件一个标记），ref等号后面的内容相当于给子组件重命名，
并且在父组件中通过$refs拿到写了ref（有标记）的子组件

 <cpn ref="c1"></cpn>
 ---
 console.log(this.$refs.c1);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn ref="c1"></cpn>
    </div>

    <template id="cpn1">
        <div>
            <h2></h2>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const cpn = {
            template:"#cpn1"
        }
        const app = new Vue({
            el:"#app",
            data: {

            },
            methods: {

            },
            components: {
                cpn
            },
            mounted() {
                console.log(this.$children);
                console.log(this.$refs.c1);
            }
        })
    </script>
</body>
</html>

方法三：子组件通过$emit发送信息给父组件
子组件触发事件的时候，被监听，并把信息传给父组件的方法

 <cpn @send="getInfo" :pro1="message"></cpn>

//父组件中
 getInfo(e){
                    console.log(e);
                }

//子组件中
 methods: {
                add(){
                    this.$emit('send', this.info)
                }
            }
        }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn @send="getInfo" :pro1="message"></cpn>
    </div>

    <template id="cpn1">
        <div>
            <button @click="add">{{pro1}}</button>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const cpn = {
            template:"#cpn1",
            data() {
                return {
                    info:"子组件的消息"
                }
            },
            props:{
               pro1:{
                   type:String,
                   default:"父组件未给消息"
               }
            },
            mounted() {
               
            },
            methods: {
                add(){
                    this.$emit('send', this.info)
                }
            }
        }
        const app = new Vue({
            el:"#app",
            data: {
                message:"父组件的消息"
            },
            methods: {
                getInfo(e){
                    console.log(e);
                }
            },
            components: {
                cpn
            },
            mounted() {
               
            }
        })
    </script>
</body>
</html>

子组件访问父组件

方法一：通过$parent
方法二：通过props
在子组件中，可以自己配置props

props:{
               pro1:{
                   type:String,
                   default:"父组件未给消息"
               }
            }

并且要在子组件中接收父组件的信息

<cpn @send="getInfo" :pro1="message"></cpn>

多层级组件通信：使用vuex

做李的英雄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件通信

父组件访问子组件方法一：通过$children拿到子组件在父组件中console.log(this.$children);方法二：通过给子组件加ref（我理解为给子组件一个标记），ref等号后面的内容相当于给子组件重命名，并且在父组件中通过$refs拿到写了ref（有标记）的子组件 <cpn ref="c1"></cpn> --- console.log(this.$refs.c1);<!DOCTYPE html><html lang="en
复制链接

扫一扫