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( '我接收到子組件傳遞的事件了' )
}