标签：包括 state 传递数据 imp pre ack font attribute lan
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>
标签：包括 state 传递数据 imp pre ack font attribute lan
原文地址：http://www.cnblogs.com/Darlietoothpaste/p/7718466.html
