uni-app、Vue组件的使用-引用子组件、传值

//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
 9 props:{ // 获取父组件传来的值 10 title:{ 11 type:String, 12 default:'' 13 } 14 } 15 }, 16 methods:{
    say(){
       console.log('明天不上班');
   this.$emit('helloWorld') // 传值给父组件 20     }
}
</script>

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

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

1.引用：

　　①在需要使用的父组件中通过import引入；

　　②在vue的components中注册；

　　③在父组件中直接引用，如：<bar></bar>

 2.传值给子组件

　　①在父组件通过v-bind传入一个值，如：<bar :title="title"></bar>

　　②在子组件中，通过props接收，如：

　　props:{                  // 获取父组件传来的值
　　 title:{
　　        type:String,
　　        default:''
　　       }
　　    }
　　},

 3.传值给父组件——通过this.$emit将方法和数据传递给父组件

　　①子组件：this.$emit('helloWorld') // 传值给父组件

　　②父组件：

helloWorld(){
    console.log( '我接收到子组件传递的事件了' )
}