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>