VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值
Child组件
<template>
<span>{{message}}</span>
</template>
<script>
export default {
props: ['message'],
data () {
return {}
}
}
</script>Father组件
<template>
<div>
<child message='via props'></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
}
}
</script> 运行结果
2.非Prop传递数据
Child
<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
<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
<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
<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
<template>
<div>
<slot message="This is a children message"></slot>
</div>
</template>
<script>
export default {
}
</script>Father
<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
<template>
<div></div>
</template>
<script>
export default {
data () {
return {
childMsg: 'this is a child msg'
}
}
}
</script>Father
<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
<template>
<div></div>
</template>
<script>
export default {
mounted () {
console.log(this.$parent.fatherMsg)
}
}
</script>Father
<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 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
