vue - props和$emit父子组件传值和EventHub非父子组件间传值

最新推荐文章于 2022-09-13 16:17:33 发布

只想当米虫

最新推荐文章于 2022-09-13 16:17:33 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_44352182/article/details/89598247

版权

本文介绍了Vue中父子组件的通信方法，包括通过props将值从父组件传给子组件，以及子组件使用$emit向父组件传递信息。同时，对于非父子组件间的通信，文章提出利用EventHub作为事件中转站，实现不同组件间的通信。

摘要由CSDN通过智能技术生成

props和$emit父子组件传值

父组件向子组件传值，通过props数组：
props 子组件获取父元素值通过v-bind:parent=‘msg’ 再 props:[‘parent’]

 <div id="app">
       <com1 v-bind:chang="msg" @func="changMsg"></com1>
       {
  {list}}
   </div>
  <template id="tmp1">
      <div>
          <h1>这是子元素--{
  {chang}}</h1>
          <input type="button" name="" id="" @click="changChil" value="获取子元素中数据">
      </div>

  </template>

   <script>

   var com1={
       template:`#tmp1`,
       data(){
           return{
               msg:'我是子元素中内容'
           }
           
       },
       props:['chang'],
       methods:{
          changChil(){
              this.$emit('func',this.msg)
          }
       }
   }
   new