前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VUE 组件通信总结

VUE 组件通信总结

作者头像
菜的黑人牙膏
发布2019-01-21 16:20:28
5660
发布2019-01-21 16:20:28
举报
文章被收录于专栏:前端学习归纳总结

1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值

Child组件

代码语言:javascript
复制
<template>
  <span>{{message}}</span>
</template>
<script>
export default {
  props: ['message'],
  data () {
    return {}
  }
}
</script>

Father组件

代码语言:javascript
复制
<template>
    <div>
        <child message='via props'></child>
    </div>
</template>
<script>
import child from './child'
export default {
    components: {
        child
    }
}
</script>  

运行结果

 2.非Prop传递数据

Child

代码语言:javascript
复制
<template>
  <span @click="getData()">{{message}}</span>
</template>
<script>
export default {
  props: ['message'],
  data () {
return {}
},
  methods: {
    getData () {
      console.log(this.$el.attributes.noprop.value)
    }
  }
}
</script>

Father

代码语言:javascript
复制
<template>
  <div>
    <child noProp='not via props' message='via props'></child>
  </div>
</template>
<script>
import child from './child'
export default {
  components: {
    child
  }
}
</script>

运行结果

 3.v-on v-emit 子组件传给父组件

Child

代码语言:javascript
复制
<template>
  <span @click="emitTest()">{{message}}</span>
</template>
<script>
export default {
  props: ['message'],
  data () {
    return {}
  },
  methods: {
    emitTest () {
      console.log('This is children"s message')
      this.$emit('onTest', '123')
    }
  }
}

</script>

Father

代码语言:javascript
复制
<template>
  <div>
    <child v-on:onTest='onTestFunc' message='via props'></child>
  </div>
</template>
<script>
import child from './child'
export default {
  components: {
    child
  },
  methods: {
    onTestFunc (id) {
      console.log('This is father"s message' + id)
    }
  }
}
</script>

运行结果

4.空vue实例作为事件总线,非父子组件通信

5.Vuex

https://cn.vuejs.org/v2/guide/state-management.html

6.作用域插槽

child

代码语言:javascript
复制
<template>
  <div>
    <slot message="This is a children message"></slot>
  </div>
</template>
<script>
export default {
}
</script>

Father

代码语言:javascript
复制
<template>
  <div>
    <child>
      <template scope="scope">{{scope.message}}</template>
    </child>
  </div>
</template>
<script>
import child from './child'
export default {
  components: {
    child
  }
}
</script>

运行结果

7.$parent,$children

$children,即在父组件中,可以利用this.$children[x]来访问子组件的data属性,如果你觉得按数组当有多个子组件时难以维护,也可以用$ref,

首先你的给子组件做标记。demo :<firstchild ref="one"></firstchild>

然后在父组件中,通过this.$refs.one就可以访问了这个自组件了,包括访问自组件的data里面的数据,调用它的函数

Child

代码语言:javascript
复制
<template>
  <div></div>
</template>
<script>
export default {
  data () {
    return {
      childMsg: 'this is a child msg'
    }
  }
}
</script>

Father

代码语言:javascript
复制
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import child from './child'
export default {
  components: {
    child
  },
  mounted () {
    console.log(this.$children[0].childMsg)
}
}
</script>

$parent

Child

代码语言:javascript
复制
<template>
  <div></div>
</template>
<script>
export default {
  mounted () {
    console.log(this.$parent.fatherMsg)
  }
}
</script>

Father

代码语言:javascript
复制
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import child from './child'
export default {
  components: {
    child
  },
  data () {
    return {
      fatherMsg: 'this is a fatherMsg'
    }
  }
}
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-10-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
事件总线
腾讯云事件总线(EventBridge)是一款安全,稳定,高效的云上事件连接器,作为流数据和事件的自动收集、处理、分发管道,通过可视化的配置,实现事件源(例如:Kafka,审计,数据库等)和目标对象(例如:CLS,SCF等)的快速连接,当前 EventBridge 已接入 100+ 云上服务,助力分布式事件驱动架构的快速构建。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档