vue父子组件通信

1.子组件的使用

在vue中，需要：

1. 编写子组件
2. 在需要使用的父组件中通过import引入
3. 在vue的components中注册
4. 在模板中使用

//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
},
methods:{
    say(index,id){
       console.log('明天不上班');
       this.$emit('helloWorld',index,id) //可传递多个参数，也可以不传
       // this.$emit('hello')
    }
}
}
</script>

// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
        title:"我是标题"
    }
},
methods:{
    helloWorld(index,id){
        console.log('我接收到子组件传递的事件了' + index + ' ' + id)
    },
    hello(){
        console.log('接收无参')
    }
},
components:{
    Bar
}
}
</script>

2.父组件向子组件传递属性

1.子组件通过props属性获取

//子组件 bar.vue
<template>
  <div>
    <div :title="title"></div>
  </div>
</template>
<script>
export default{
props:{
  title:{
    type:String,
    default:''
  }
}
}
</script>

// 父组件 foo.vue
<template>
  <div>
    <bar :title="title"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
        title:"父组件标题"
    }
},
components:{
    Bar
}
}
</script>

2.父组件通过ref获取子组件的数据

//子组件 bar.vue
<template>
  <div>
  </div>
</template>
<script>
export default{
    name: 'Bar',
    data () {
      return {
        title: '子组件标题'
      }
    },
    methods: {}
}
</script>

// 父组件 foo.vue
<template>
  <div>
    <bar ref="bar"></bar>
    <input type="button" @click="getChildData" value="获取子组件的数据">
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
        title:""
    }
},
components:{
    Bar
},
methods: {
    getChildData(){
        this.title = this.$refs.bar.title
    }
}
}
</script>

3.子组件向父组件传递属性

1.子组件通过触发事件传递属性

//子组件 bar.vue
<template>
  <div>
    <div @click="say" :title="title"></div>
  </div>
</template>
<script>
export default{
methods:{
    say(index,id){
       this.$emit('helloWorld',index,id) //可传递多个参数，也可以不传
    }
}
}
</script>

// 父组件 foo.vue
<template>
  <div>
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
        title:"我是标题"
    }
},
methods:{
    helloWorld(index,id){
        console.log('我接收到子组件传递的事件了' + index + ' ' + id)
    }
},
components:{
    Bar
}
}
</script>

2.子组件直接调取父组件数据

//子组件 bar.vue
<template>
  <div>
    <input type="button" @click="getParentData" value="获取父组件的数据">
  </div>
</template>
<script>
export default{
    name: 'Bar',
    data () {
      return {
        title: ''
      }
    },
    methods: {
        getParentData() {
            this.title = this.$parent.title
        }
    }
}
</script>

// 父组件 foo.vue
<template>
  <div>
    <bar ref="bar"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
        title:"父组件标题"
    }
},
components:{
    Bar
}
}
</script>

3.子组件调用父组件的方法

1、子组件中通过“this.$parent.event”来调用父组件的方法

//子组件 bar.vue
<template>
  <div>
    <input type="button" @click="getParentData" value="获取父组件的方法">
  </div>
</template>
<script>
export default{
    name: 'Bar',
    data () {
      return {
        title: ''
      }
    },
    methods: {
        getParentData() {
            this.$parent.parentMethod()
        }
    }
}
</script>

// 父组件 foo.vue
<template>
  <div>
    <bar ref="bar"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){

},
components:{
    Bar
},
methods: {
    parentMethod() {
        console.log('父组件的方法')
    }
}
}
</script>

2、子组件用“$emit”向父组件触发一个事件，父组件监听这个事件即可。

//子组件 bar.vue
<template>
  <div>
    <div @click="say"></div>
  </div>
</template>
<script>
export default{
props:{

},
methods:{
    say(index,id){
       this.$emit('helloWorld',index,id) //可传递多个参数，也可以不传
       // this.$emit('helloWorld')
    }
}
}
</script>

// 父组件 foo.vue
<template>
  <div>
    <bar @helloWorld="helloWorld"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
    }
},
methods:{
    helloWorld(index,id){
        console.log('我接收到子组件传递的事件了' + index + ' ' + id)
    },
    helloWorld(){
        console.log('接收无参')
    }
},
components:{
    Bar
}
}
</script>

3、父组件把方法传入子组件中，在子组件里直接调用这个方法即可。

//子组件 bar.vue
<template>
  <div>
  </div>
</template>
<script>
export default{
props:{
  title:{
    type:Function,
    default:null
  }
}
}
</script>

// 父组件 foo.vue
<template>
  <div>
    <bar :title="parentMethod"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
    }
},
components:{
    Bar
},
methods: {
    parentMethod() {
        console.log('父组件方法触发')
    }
}
}
</script>

4.父组件调用子组件的方法

1.通过ref直接调用子组件的方法

//子组件 bar.vue
<template>
  <div>
  </div>
</template>
<script>
export default{
    name: 'Bar',
    data () {
      return {
      }
    },
    methods: {
        childMethod() {
            console.log('触发子组件的方法')
        }
    }
}
</script>

// 父组件 foo.vue
<template>
  <div>
    <bar ref="bar"></bar>
    <input type="button" @click="getChildData" value="获取子组件的数据">
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
    }
},
components:{
    Bar
},
methods: {
    getChildData(){
        this.$refs.bar.childMethod()
    }
}
}
</script>

2.通过组件的$emit和$on方法

//子组件 bar.vue
<template>
  <div>
  </div>
</template>
<script>
export default{
props:{
},
mounted() {
  this.$nextTick(function() {
     this.$on('childmethods', function() {
        console.log('我是子组件方法');
      );
   });
},

}
</script>

// 父组件 foo.vue
<template>
  <div>
    <Button @click="handleClick">点击调用子组件方法</Button>
    <bar></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
    }
},
methods:{
    handleClick(){
        this.$refs.child.$emit("childmethod")    //子组件$on中的名字
    }
},
components:{
    Bar
}
}
</script>