uniapp组件使用以及父子传值

一.组件定义使用

一.vue组件
1.在项目的/component目录下存放组件，在要显示组件的页面中则分为3步：导入、注册和使用。例：

2.2.5.0+版本支持在pages.json内引入组件
（easycom组件模式）
只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构，就可以不用引用、注册，直接在页面中使用。 例：

注：easycom方式引入组件不是全局引入，而是局部引入
3.uni-app只支持vue单文件组件（.vue 组件）

二.uni-app内置基础组件
uni-app 内置了小程序的所有组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

   
      当前选择: {{date}}
    

三.全局组件
uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。

import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)
// 注：Vue.component 的第一个参数必须是静态的字符串

例如在index.vue 里可直接使用组件：

四.data必须是一个函数

data: function () {
  return {
  
  }
}

二.父子组件传值

一.自定义组件并通过 Prop 向子组件传递数据
父组件通过传递属性向子组件传值 props v-bind
例：将myvue.vue引入index.vue页面中显示
// myvue.vue子组件内容

// index.vue父组件内容

效果如图：

二.子组件通过事件触发的形式向父组件传值 $emit v-on
// 子组件内容

	{{childValue}}
	

// 父组件内容