vue父子传值,兄弟传值,子父传值详解

 更新时间:2021年11月01日 14:48:03   作者:大林爱学习  
这篇文章主要介绍了Vue传值-三种常用传值示例,主要介绍了父组件向子组件进行传值,子组件向父组件传值和非父子组件进行传值,感兴趣的小伙伴们可以参考一下

一、父组件向子组件传值

1.父组件.vue

// 父组件中
<template>
    <div>
        <Child ref="child" :title="value"/>
    </div>
</template>    
<script>
export default {
    data() {
    	return {
    		value: 'hello world!'
    	}
    }
}
</script>

2.子组件.vue

// 父组件中
<template>
    <div>
       <span>{{title}}</span>    
    </div>
</template>    
<script>
export default {
  props: {
    title: {
      	type: String,
      	default: ''
    }
  }
}
</script>

//title值为'hello world!

二、兄弟组件间传值还可以通过中间件Bus

$emit 传值

$on 接收

$off 删除传输事件

1.A组件.js

this.$bus.$emit("flag",true)

2.B组件.js

mounted() {
    this.$bus.$off('flag')
    this.$bus.$on('flag', data=> {
      this.flag= data
    })
  }

三、子组件向父组件传值

1.父组件.js

<template>
    <div>
        <Child ref="child" @getTitle="getTitle"/>
    </div>
</template>  
<script>
import Child from './components/Child'
export default {
  components: {
  	Child 
  },
  data() {
    return {
    }
  },
  method:{
  	getTitle(data){
		console.log(data)
	}
  }
}
</script>

打印结果为 hello xuliting

2.子组件.js

<template>
    <div>
       <span>{{title}}</span> 
    </div>
</template>    
<script>
export default {
  data() {
    return {
    title: 'hello xuliting'
    }
  },
  mounted(){
    this.getFun()
  },
  method:{
    getFun(){
     this.$emit("getTiltle",this.title)
    }
  }
}
</script>

总结:

组件间也可以通过传递方法从而解决。例如父组件为A,子组件有B和C。

父组件A调用子组件B的方法定义为aFun,把aFun传递给子组件C即可

这是在父组件中的组件C进行方法传递

<C :a-fun="aFun" />

引用的则是在组件C,通过props

props: {
    aFun: {
      type: Function,
      default: () => function() {}
    }
  }

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • Vue.js每天必学之组件与组件间的通信

    Vue.js每天必学之组件与组件间的通信

    Vue.js每天必学之组件与组件间的通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    这篇文章主要介绍了vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定的相关知识,本文通过实例代码相结合的形式给大家介绍的非常详细 ,需要的朋友可以参考下
    2018-09-09
  • 分享Vue组件传值的几种常用方式(一)

    分享Vue组件传值的几种常用方式(一)

    这篇文章主要给大家分享的是Vue组件传值的几种常用方式,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-09-09
  • 详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

    详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

    这篇文章主要介绍了详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • Vue简单封装axios网络请求的方法

    Vue简单封装axios网络请求的方法

    这篇文章主要介绍了Vue简单封装axios网络请求,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,对Vue封装axios网络请求相关知识感兴趣的朋友一起看看吧
    2022-11-11
  • elementPlus中的Autocomplete弹出层错位问题解决分析

    elementPlus中的Autocomplete弹出层错位问题解决分析

    这篇文章主要介绍了elementPlus中的Autocomplete弹出层错位问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue截图转base64转文件File异步获取方式

    vue截图转base64转文件File异步获取方式

    这篇文章主要介绍了vue截图转base64转文件File异步获取方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue项目运行时出现It works的问题解决

    vue项目运行时出现It works的问题解决

    本文主要介绍了vue项目运行时出现It works的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue.use()的用法和install的用法解析

    Vue.use()的用法和install的用法解析

    这篇文章主要介绍了Vue.use()的用法和install的用法解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 使用Karma做vue组件单元测试的实现

    使用Karma做vue组件单元测试的实现

    这篇文章主要介绍了使用Karma做vue组件单元测试的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论