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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 父组件中
<template>
    <div>
        <Child ref="child" :title="value"/>
    </div>
</template>    
<script>
export default {
    data() {
    	return {
    		value: 'hello world!'
    	}
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 父组件中
<template>
    <div>
       <span>{{title}}</span>    
    </div>
</template>    
<script>
export default {
  props: {
    title: {
      	type: String,
      	default: ''
    }
  }
}
</script>

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

1
2
3
4
5
6
mounted() {
    this.$bus.$off('flag')
    this.$bus.$on('flag', data=> {
      this.flag= data
    })
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

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

1
2
3
4
5
6
props: {
    aFun: {
      type: Function,
      default: () => function() {}
    }
  }