vue父子组件传值以及通讯

1.子组件的使用

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(){
       console.log('明天不上班');
       this.$emit('helloWorld')
    }
}
</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(){
        console.log('我接收到子组件传递的事件了')
    }
},
components:{
    Bar
}
</script>

2.父子组件间通信

父组件向子组件传递数据
只需要在父组件通过v-bind传入一个值，在子组件中，通过props接收，即可完成数据的传递，示例:

// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title"></bar>
  </div>
</template>
<script>
import Bar from './bar.vue'
export default{
  data(){
    return{        
        title:"我是标题"
    }
},
components:{
    Bar
}
</script>

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

子组件和父组件通信可以通过this.$emit将方法和数据传递给父组件。

父组件调用子组件的方法

vue会给子组件添加一个ref属性，通过this.$refs.ref的值便可以获取到该子组件，然后便可以调用子组件中的任意方法，例如：

//子组件
<bar ref="bar"></bar>

//父组件
this.$ref.bar.子组件的方法