项目笔记整理02-vue路由懒加载+组件传值

1.路由懒加载

（1）异步懒加载。

可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身，而我们又可以使用import来导入组件。

{
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld'], resolve)
}

（2）用import方式。常用的方法。

{
      path: '/',
      name: 'HelloWorld',
      component: () => import('@/components/HelloWorld.vue')
}

2.组件传值

1.父传子

（1）父组件.vue：=在父组件中引入子组件HelloWorld ，设置自定义属性msg/msgs

<template>
<div class="home">
    <HelloWorld msg="这是home页面" :msgs="value"/>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  data(){
      return{
          value:'123456'
      }
  }
  components: {
    HelloWorld
  }
};
</script>

（2）子组件.vue:子组件通过props获取自定义属性,设置获取的数据类型

<template>
  <div class="hello">
    <!-- 组件传值，父传子 -->
    <p>{{ msg }}</p>
    <p>{{ msgs }}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
    msgs:String
  }
};
</script>

2.子传父

（1）子组件.vue：自定义事件

<template>
<div class="son">
    <div class="price-up" @click="priceUp">按价格升序排序</div>
	<div class="price-down" @click="priceDown">按价格降序排序</div>
</div>
</template>

<script>
export default {
  name: "son",
  data(){
      return{
      }
  },
  methods:{
	  priceUp(){
		    prodList({priceOrder:"true"}).then(res=>{
		        this.$emit("searchValue",res.data.records)
		    })
		},
	  priceDown(){
		    prodList({priceOrder:"false"}).then(res=>{
		        this.$emit("searchValue",res.data.records)
		    })
		},
  }
};
</script>

(2)父组件（在父组件中引入，把自定义事件绑定）

<template>
<div class="home">
    <Seachbox  v-on:searchValue="searchValue"/>
</div>
</template>

<script>
import Seachbox from "@/components/Seachbox.vue";
export default {
  name: "Home",
  data(){
      return{
      }
  },
  components: {
    HelloWorld
  },
  methods:{
	searchValue(val){
      this.prolist = val
    }
 }
};
</script>