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

合集 - uni-app知识(14)

1.uni-app学习笔记（一）-官方文档的学习路线2022-01-212.uni-app学习笔记（二）-Vue组件学习2022-01-263.uni-app学习笔记（三）-网络请求2022-01-264.html标签和uni-app内置组件的映射表2022-01-175.微信小程序转uni-app时常见的语法变化2022-01-266.uni-app 不同平台使用不同的Vue组件2022-01-267.uni-app判断运行的平台2022-01-258.uni-app开发环境和生产环境的判断2022-01-249.uni-app static目录的条件编译2022-01-2510.uni-app支持的css选择器2022-01-2611.vue与nvue的区别2022-01-1712.uni-app的upx与px、rpx的区别2022-01-2113.uni-app打包64位的安卓app2022-01-17

14.uni-app、Vue组件的使用-引用子组件、传值2022-01-19

收起

//子组件 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 },
methods:{
    say(){
       console.log('明天不上班');
       this.$emit('helloWorld')  // 传值给父组件
    }
}
</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     }
},
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') // 传值给父组件

　　②父组件：

?

1 2 3

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