uni-app组件-父子通信

uni-app 扩展了常用的的UI组件，使用方式：

1. 从 hello uniapp 的 components 目录拷贝出以 uni 开头的相关组件，从 common 目录拷贝出 uni.css（在 HBuilderX 中新建 hello uniapp 示例也可得到相关组件和css）。
2. 将拷贝出的组件放置于自己工程下的 components 目录，组件的使用可参考各组件的使用说明。
3. 项目中如果有多个页面用到扩展组件，可在 App.vue 里引入 uni.css，若只是很少的页面用到扩展组件，仅需在用到的页面里引入 uni.css，引入外部css可参考 样式导入。

注意：在template标签里面还得用一个view来包裹全部的代码，不然会报错；注册组件的时候可以使用驼峰命名法，使用的时候跟vue一样得转化为中斜杆的形式。

举个栗子.jpg
在HBuilder X新建完hello-uniapp项目之后，根据顶部写的uni-app 扩展了常用的的UI组件的使用方式把相关文件拷贝进去之后，再把index.vue代码删除，复制下面这一段代码进去：
image.png

<template>
    <view>
        <uni-nav-bar left-icon="back" left-text="返回" @click-left="back" title="标题"></uni-nav-bar>
        <view>
            <uni-icon type="contact" size="30"></uni-icon>
            <uni-icon type="weibo" size="30"></uni-icon>
            <uni-icon type="chat" size="30"></uni-icon>
        </view>
    </view>
</template>

<script>
    import uniNavBar from "../../components/uni-nav-bar.vue"
    import uniIcon from "../../components/uni-icon.vue"
    export default {
        components: {uniIcon,uniNavBar},
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400upx;
    }
    .logo{
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }
    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
</style>

在app.vue页面引入uni.css

<script>
    export default {
        onLaunch: function () {
            console.log('App Launch')
        },
        onShow: function () {
            console.log('App Show')
        },
        onHide: function () {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
    @import './common/uni.css';
</style>

image.png

一个跟vue一样的父子组件通信使用引入完成，uni-nav-bar，uni-icon组件代码和uni.css在 hello uniapp 里面可以找到。

官网https://github.com/dcloudio/hello-uniapp
https://ask.dcloud.net.cn/article/19727