uniapp组件的使用

1自定义组件的

组件的创建：必须是components/steper
下生成的组件
导入的模式分为直接导入和传统模式的导入
1.2组件的传参
子传父
组件数据的全局传参(任意组件和页面都可以监听)

1.父传子：props
    父通过属性的方式传递个字组件
        <steper :value="d1" ></steper>  
	子通过props接收
             props:{
             11接收参数value
             value:{
             type:Number, 1数字类型默认值为1
             default:1,
    子组件可以使用
          this .count = this.value
2.子传父 事件$emit
     子触发事件.
         this.Semit"input .this.count)
     父监听事件更新值
        <steper :value-"d1" @input= "d1 = $event"></steper>

3.全局传参：uni.$on
    全局发送事件
         uni.$on("事件名",事件值)
    全局监听(发送事件前已经注册监听)；created生命周期；uni.$on("事件名",$event=>{响应操作})

2第三方组件uview

网址：https://www.uviewui.com/components/downloadSetting.html
uview组件的配置

3微信组件

在page.json中导入

1.wxcomponents //存放插件
2.pages.json导入
	{
		"path": "pages/condition/min",
		"style": {
			"navigationBarTitleText": "min组件",
			"mp-weixin": {
				"usingComponents": {
					"item": "/wxcomponents/item/item"
				}
			}
		}
	},

在页面中使用

4vuex的使用

1初始化

01初始化（store/index.js）
    import Vuex from "vuex"
    import Vue from "vue"
    Vue.use(Vuex)
    export default new Vuex.Store({
        state,mutations.actions,getters,moudules

2.在main.js中

import store from "./store/index.js"
Vue.prototype.$store=store;

vuex模块的介绍

state存放数据
mutations更新数据的唯一方式
actions 异步操作
getters：计算，从现有的state计算出新的数据
modules

3.组件在数据中的使用

state:{
     gTitle:{text:"你好vuex",color:"#000,fontSize:"24px",background:"#f70"}}

在页面中使用
    $store.state.gTitle.text
    修改只能通过mutations

mutations改变数据
    setFontSize(state,data){state.gTitle.fontSize=data+"px"}
    在页面中使用this.$store.commit("setFontSize",80)
    简写形式
        import {mapMutations} from "vuex"
        methods:{["setFontSize"]}
        this.setFontSize(100)


actions异步操作
    定义
        actions:{
        getJok(context,data){
        uni.request({ url:"http://520mg/mi.com/list.php",
        success:res=>{context.commit("setjoks",res.data.result)}})

    在页面中使用
        this.$store.dispatch("getJok",{page:1})

    简写形式
        导入：import {mapActions} from "vuex"
        计算 methods:{...mapActions["getJok"]}
        使用：this.getJok


getters计算
    getters:{"totalLen":function(state){return xxxx}}
    在页面中使用：this.$store.getters.totalLen
    简写
        import {mapFetters} from "vuex"
        computed:{...mapGetter(["totalLen"])}
        this.totalLen

5图片组件

1.上传图片
2.图片的保存分享和预览