亲宝软件园·资讯

展开

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

大林爱学习 人气:0
想了解vue父子传值,兄弟传值,子父传值详解的相关内容吗,大林爱学习在本文为您仔细讲解vue父子传值,兄弟传值,子父传值的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue父子传值,vue兄弟传值,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() {}
    }
  }

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

加载全部内容

相关教程
猜你喜欢
用户评论