Vue 父子组件通信

最新推荐文章于 2023-05-31 19:24:05 发布

LM-mint

最新推荐文章于 2023-05-31 19:24:05 发布

阅读量243

点赞数

分类专栏：【Vue】

本文链接：https://blog.csdn.net/TheBestAge/article/details/88044394

版权

【Vue】专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Vue传值方式，在Angular和VUE的学习中了解了组件的概念，组件就是自定义的元素，包含了一些HTML元素和一些可封装重用的代码。Vue组件同时也是Vue实例，具有相同的生命周期钩子。本篇博客主要讲解如何在父子组件之间进行传值通信操作。

父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

一、父组件传值给子组件

<body>
    <div id="app">
        <!--引入子组件-->
        <coml v-bind:parentmsg="msg"></coml>
        <h1>这是父组件-----{{ msg }}</hl>
    </div>

    <template id="tmp1">
        <div>
            <h1>这是子组件-----{{ parentmsg }}</hl>
        </div>
    </template>

   <script>
        var coml={
            template:"#tmp1",
            <!--接受父组件的传值-->
            props:['parentmsg'],
            }
        }


      var vm=new Vue({
          el:'#app',
          data:{
              msg:'这是父组件中的数据',
          },
          components:{
              coml
          }
      })
   </script>
</body>

效果图：
在这里插入图片描述
二、子组件给父组件传值

<body>
    <div id="app">
        <!--引入子组件，定义@func方法监听子组件-->
        <coml @func="getmsgFormSon"></coml>
        <h1>这是父组件-----{{ msgFormSon }}</hl>
    </div>

    <template id="tmp1">
        <div>     
            <h1>这是子组件-----{{ msg }}</hl> 
            <!--定义子组件传值的方法-->
            <input type="button" value="向父组件传递消息" @click="sendMsg">
        </div>
    </template>


   <script>
        var coml={
            template:"#tmp1",
            data(){
                return{
                      msg:'子组件中的数据'
                }
            },
            methods:{
                sendMsg(){
                   <!--子组件触发，被监听的方法,传值-->
                    this.$emit('func',this.msg)
                }
            }
        }


      var vm=new Vue({
          el:'#app',
          data:{
              msgFormSon:''
          },
          methods:{
              <!--监听并接受子组件的传值-->
              getmsgFormSon(data){               
                  this.msgFormSon = data;
              }
          },
          components:{
              coml
          }
      })
   </script>
</body>

效果图：
在这里插入图片描述

以上就是父子组件之间的传值方式，还有组件之间的传值方式，会在下一篇博客中做详细介绍。

LM-mint

关注

0
点赞
踩
0

收藏

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

Vue传值方式，在Angular和VUE的学习中了解了组件的概念，组件就是自定义的元素，包含了一些HTML元素和一些可封装重用的代码。Vue组件同时也是Vue实例，具有相同的生命周期钩子。本篇博客主要讲解如何在父子组件之间进行传值通信操作。父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。一、父组件传值给子组件...
复制链接

扫一扫

专栏目录