脚本宝典收集整理的这篇文章主要介绍了Vue——传值，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

组件实例的作用域是孤立的。这样我们就不能再子组件的模板内直接引用父组件的数据。要实现组件简单的通信：

1.子组件向父组件传值

子组件：
<template>
<div class="child">
<h1>子组件</h1>
<button v-on:click="toggle">向父组件传值</button>
</div>
</template>
<script>
export default{
data(){
  return{}
},methods:{
  toggle:function(){
    this.$emit("p","子组件向父组件传值")
  }
}
}
</script>

父组件：
<template>
<div class="index">
<child v-on:p="show"></child>
</div>
</template>
<script>
import child from '../../components/export/child'
 export default{
components:{
  child
},
data(){
  return {}
},methods:{
  show:function(data){
    alert("父组件显示信息:"+data)
  }
}
}
</script>

说明:父组件通过“v-on:p="show”监听由子组件vm.$emit触发的事
件，通过show接受从子组件传过来的数据

2.父组件给子组件传值

父组件：
<template>
<div class="parent">
<h1>父组件</h1>
<child v-bind:c="show"></child>
</div>
</template>
<script>
import child from '../../components/export/child'
export default{
components:{ child },
data(){
  return {
    show:'父组件向子组件传值'
  }
}
}
</script>

子组件：
<template>
<div class="child">
<h1>子组件</h1>
<div>子组件显示信息:{{c}}</div>
</div>
</template>
<script>
export default{
data(){
  return{}
},props:['c']
}
</script>

3.无关联组件传值

1.在assets新建一个事件总栈EventBus.js（它承担起组件之间通信的桥梁）
import Vue from 'vue'
export default new Vue;

2.创建一个新的组件FristTemplate：
 <template>
<div class="FristTemplate">
<h1>FristTemplate组件</h1>
<button v-on:click="sendMsg">FristTemplate</button>
</div>
</template>
<script>
import bus from '@/assets/EventBus'
export default{
data(){
  return{}
},methods(){
sendMsg:function(){
bus.$emit('bus','FristTemplate')
}
}
}
</script>
说明：我们在响应点击事件的sengMsg函数中用$emit触发了一个自定义的bus事件，并传递了一个字符参数

3.新建SecondChild组件
 <template>
<div class="SecondChild">
<p>{{msg}}</p>
 </div>
</template>
<script>
import bus from '@/assets/EventBus'
export default{
data(){
  return{
  msg:'默认值'
  }
},mounted(){
  var _this=this;
  bus.$on('bus',function(msg){
  this.msg=msg;
  })
}
}
</script>
说明：在mounted中，监听了bus,并把传过来的字符串参数传递给了$on监听器的回调函数

脚本宝典总结

以上是脚本宝典为你收集整理的Vue——传值全部内容，希望文章能够帮你解决Vue——传值所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。