码迷,mamicode.com
首页 > 其他好文 > 详细

VUE 组件通信总结

时间:2017-10-23 20:00:44      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:包括   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>

 

技术分享

 

VUE 组件通信总结

标签:包括   state   传递数据   imp   pre   ack   font   attribute   lan   

原文地址:http://www.cnblogs.com/Darlietoothpaste/p/7718466.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!