uniapp学习（二）

easycom自动导入自定义组件

目录下 components / MyItem /MyItem.vue

<template>
  <view>
    <view class="item">
      (｡･∀･)ﾉﾞ嗨
    </view>
  </view>
</template>
<style lang="scss">
.item{
  width: 200rpx;
  height:200rpx;
  background-color: orange;
}
</style>

使用

<template>
<view>
<MyItem></MyItem>
  <!-- 其他东西 -->
</view>
</template>

props父向子组件传值

父传子

<!-- 组件 Components/MyItem.vue-->
<view class="pubTitle">
  <view class="big">
    {{title}}
  </view>
  <view class="small">
   {{subtitle}}
  </view>
  <view class="line">
  </view>
  </view>
</template>
<script>
  export default {
    props:["title","subtitle"],
    data() {
      return {
      };
    }
  }
</script>
<style lang="scss">
.pubTitle{
  padding: 60rpx 30rpx;
  text-align: center;
  .big{
    font-size: 50rpx;
    font-weight: 600;
    color: #333;
  }
  .small{
    font-size: 28rpx;
    color: #888;
  }
  .line{
    display: inline-block;
    width: 80rpx;
    height: 8rpx;
   background-color: #1AA034;
   border-radius: 10rpx;
  }
}
</style>

使用组件方

 <MyItem title="首页" subtitle="index Page"></MyItem>
<!-- 驼峰写法也好使 -->
<My-item title="首页" subtitle="index Page"></My-item>

绑定动态值及数据类型默认值

动态传值的使用组件方

<template>
<view>
  <MyItem :title="text" :subtitle="subtitle"></MyItem>
</view>
</template>
<script>
	export default {
		data(){
      return{
         text:"(｡･∀･)ﾉﾞ嗨",
         subtitle:"┗|｀O′|┛ 嗷~~"
      };
    }
	}
</script>

数据默认值的组件方

<template>
  <view class="pubTitle">
    <view class="time">
      {{time}}
    </view>
  <view class="big">
    {{title}}
  </view>
  <view class="small">
   {{subtitle}}
  </view>
  <view class="list">
    {{list}}
  </view>
  <view class="obj">
    {{obj}}
  </view>
  <view class="line">
  </view>
  </view>
</template>

<script>
  export default {
    // props:["title","subtitle"],
    props:{
      title:{
        type: String,
        default:"默认标题"
      },
      subtitle:{
        type: String,
        default:"默认副标题"
      },
      // 父组件传值时。除string都要v-bind
      time:{
        type: Number,
        default:Date.now()
      },
      // 数组和对象都得 default() return
      list:{
        type:Array,
        default(){
          return [1,2,3]
        }
      },
      obj:{
        type:Object,
        default(){
          return {
            a:1,
            b:2
          }
        }
      }
    },
    data() {
      return {

      };
    }
  }
</script>

emit子向父组件传值

子组件

<template>
  <view>
    <view class="" >
      <input type="text" placeholder="请输入"
      @input="inputsomeThing"
      >
    </view>
  </view>
</template>

<script>
  export default {
    methods:{
      inputsomeThing(e){
        // this.$emit(事件名,值)
        // 只传单值
          // this.$emit("myenv", {
          //   e.detail.value,
          // )

          // 传对象(多值)
        this.$emit("myenv", {
          value:e.detail.value,
          time:Date.now()
        })
      }
    }
  }
</script>

父组件

<template>
<view class="box">
<myEvent @myenv="myenv"></myEvent>
</view>
</template>
<script>
	export default {
		data(){
      return{
      };
    },
    methods:{
      myenv(e){
        console.log(e)
      }
    }
	}
</script>

native 修饰符与父子间通信传值

父组件

<template>
<view class="box">
<myEvent
@myenv="myenv"
@click.native="onCLick"
></myEvent>
<!--
就是你写 @click，它会以为我们自定义了个事件
所以后面加个native,说明这是原生的，不是在父子组件通信的
-->
<button @click="turnON">开启</button>
<!-- 核心还是通过props传数据给子组件，只是结合了使用修饰符让原生事件在子组件标签上生效而已-->
<!-- 数据向下走，方法向上走 -->
<mypop :state="state"
@fade="fade"
></mypop>
</view>
</template>
<!-- <box-icon name='home-alt-2' flip='horizontal' color='#a09898' ></box-icon> -->
<script>
	export default {
		data(){
      return{
        state:false
      };
    },
    methods:{
      myenv(e){
        console.log(e)
      },
      onCLick(){
        console.log("(｡･∀･)ﾉﾞ嗨")
      },
      turnON(){
        this.state = true
      },
      fade(e){
         this.state = e
      }
    }
	}
</script>

子组件 myEvent

<template>
  <view>
    <view class="" >
      <input type="text" placeholder="请输入"
      @input="inputsomeThing"
      >
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {

      };
    },
    methods:{
      // e.detail.value
      inputsomeThing(e){
        // 事件名，使用时前面加on
        // 只传单值
          // this.$emit("myenv", {
          //   e.detail.value,
          // )

          // 传多值
        this.$emit("myenv", {
          value:e.detail.value,
          time:Date.now()
        })
      }
    }
  }
</script>

子组件 mypop

<template>
  <view>
    <view class="pop"
    :style="{display: state? 'block':'none'}"
    >
    </view>
    <button size="mini" @click="fade">关闭</button>
    <view class="">
      (｡･∀･)ﾉﾞ嗨
    </view>
  </view>
</template>
<script>
  export default {
    name:"mypop",
    props:{
      state:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
      };
    },
    methods:{
      fade(){
        this.$emit("fade",false)
      }
    }
  }
</script>
<style lang="scss">
.pop{
  height: 300rpx;
  width: 300rpx;
  background-color: cornflowerblue;
}
</style>

sync修饰符以及update的实现原理

两种方法对比

不使用sync

父组件

<template>
<view class="box">
<button @click="turnON">开启</button>
<mypop :state="mystate"
@update:state = "aaa"
></mypop>
</view>
</template>
<script>
	export default {
		data(){
      return{
        mystate:false
      };
    },
    methods:{
      turnON(){
        this.mystate = true
      },
      aaa(e){
         this.mystate = e
      }
    }
	}
</script>

子组件

<template>
  <view>
    <view class="pop"
    :style="{display: state? 'block':'none'}"
    >
    </view>
    <button size="mini" @click="fade">关闭</button>
    <view class="">
      (｡･∀･)ﾉﾞ嗨
    </view>
  </view>
</template>

<script>
  export default {
    name:"mypop",
    props:{
      state:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
      };
    },
    methods:{
      fade(){
        this.$emit("update:state",false)
      }
    }
  }
</script>

<style lang="scss">
.pop{
  height: 300rpx;
  width: 300rpx;
  background-color: cornflowerblue;
}
</style>

使用sync

父组件

<template>
<view class="box">
<button @click="turnON">开启</button>
<!-- 使用.sync可以修改父子局传来的值但无法触发自定义事件 -->
<!-- 如果选的时vue3的话，父组件需要写成“v-model:state” -->
<mypop :state.sync="mystate" ></mypop>
</view>
</template>
<!-- <box-icon name='home-alt-2' flip='horizontal' color='#a09898' ></box-icon> -->
<script>
	export default {
		data(){
      return{
        mystate:false
      };
    },
    methods:{
      turnON(){
        this.mystate = true
      }
    }
	}
</script>

子组件

<template>
  <view>
    <view class="pop"
    :style="{display: state? 'block':'none'}"
    >
    </view>
    <button size="mini" @click="fade">关闭</button>
    <view class="">
      (｡･∀･)ﾉﾞ嗨
    </view>
  </view>
</template>
<script>
  export default {
    name:"mypop",
    props:{
      state:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
      };
    },
    methods:{
      fade(){
        this.$emit("update:state",false)
      }
    }
  }
</script>
<style lang="scss">
.pop{
  height: 300rpx;
  width: 300rpx;
  background-color: cornflowerblue;
}
</style>

vue中的生命周期和小程序周期的对比

VUE的生命周期 https://www.jianshu.com/p/4f8daeafe58f



普通vue页面

<template>
<view class="box">
</view>
</template>
<script>
	export default {
		data(){
      return{

      };
    },
    methods:{
      interval(){
        console.log("自定义函数")
      }
    },
    created(){
      this.interval()
//网络请求
      console.log("这是 index created")
    },

    mounted(){
//数据渲染
      console.log("index mounted")
    }
	}
</script>

APP.vue页面

也可以使用 mounted ，created 都会自动转化。但既然它本身使用了onLaunch这些东西，就用就行，不用往上添加了。

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

<style>
	/*每个页面公共css */
</style>