Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记

Vue CLI安装和使用

1. 全局安装最新vue3

npm install @vue/cli -g

2. 升级Vue CLI：
   如果是比较旧的版本，可以通过下面命令来升级

npm update @vue/cli -g

通过脚手架创建项目

vue create 01_product_demo

Vue3父子组件的通信

父传子

父组件

<template>
  <div>
    <div class="item" v-for="(item,index) in user_list" :key="index">
      <user-component :name="item.name" :age="item.age"></user-component>
    </div>
  </div>
</template>

<script>
  import UserComponent from './components/UserComponent'
  export default {
    components:{
      UserComponent
    },
    data(){
      return {
        user_list:[
          {name:'why',age:18},
          {name:'zhang',age:26},
        ]
      }
    }
  }
</script>

<style scoped>

</style>

子组件 UserComponent.vue

<template>
  <div>
    <div>名字：{{ name }}</div>
    <div>年龄：{{ age }}</div>
  </div>
</template>

<script>
  export default {
    props:{
      name:{
        type:String,
        default:''
      },
      age:{
        type:Number,
        default:0
      },
      // 对象类型
      friend:{
        type:Object,
        default:()=>({name:"james"})
      },
      // 数组类型
      hobbies:{
        type:Array,
        default:()=>['篮球','rap','唱跳']
      }
    }
  }
</script>

<style scoped>

</style>

子传父

父组件

<template>
  <div>
    <div>{{ counter }}</div>

    <JiaComponent @jia="jia"></JiaComponent> 
    <JianComponent @jian="jian"></JianComponent> 
    
  </div>
</template>

<script>
  import JiaComponent from './JiaComponent'
  import JianComponent from './JianComponent'
  export default {
    components:{
      JiaComponent,
      JianComponent
    },
    data(){
      return {
        counter:1
      }
    },
    methods:{
      jian:function(data){
        this.counter = this.counter - data;
      },
      jia:function(data){
        this.counter = this.counter + data;
      }
    }
  }
</script>

<style scoped>

</style>

**子组件1 JiaComponent.vue **

<template>
  <div>
    <div>
      <button @click="jia(1)">+1</button>
      <button @click="jia(5)">+5</button>
      <button @click="jia(10)">+10</button>
    </div>
  </div>
</template>

<script>
  export default {
    emits:['jia'], // 使用的时候会有提醒
    // emits:{
    //   // 验证
    //   jia:function(data){
    //     if(data <= 5){
    //       return true
    //     }
    //     return false
    //   }
    // },
    methods:{
      jia(data){
        this.$emit('jia',data);
      }
    }
  }
</script>

<style scoped>

</style>

** 子组件2 JianComponent.vue **

<template>
  <div>
    <div>
      <button @click="jian(1)">-1</button>
      <button @click="jian(5)">-5</button>
      <button @click="jian(10)">-10</button>
    </div>
  </div>
</template>

<script>
  export default {
    methods:{
      jian(data){
        this.$emit("jian",data);
      }
    }
  }
</script>

<style scoped>

</style>

插槽基本使用

父组件

<template>
  <div>
    <TitleComponents title="标题" desc="描述描述描述描述描述"></TitleComponents> 

    <!-- 1.插入button -->
    <TitleComponents title="标题" desc="描述描述描述描述描述">
      <button>按钮</button>
    </TitleComponents>
    <!-- 2.插入a链接 -->
    <TitleComponents title="标题" desc="描述描述描述描述描述">
      <a href="https://www.baidu.com">百度一下</a>
    </TitleComponents>
    <!-- 3.插入image -->
    <TitleComponents title="标题" desc="描述描述描述描述描述">
      <img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2F34fae6cd7b899e512cb62692d10fdf3ec9950db4.jpeg%40f_auto%3Ftoken%3D8ce9dbae74003846c318068640c41183&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1698944400&t=e504855a1a7b815dfa76940bb9ac2a07" />
    </TitleComponents>
    <!-- 4. 默认显示 -->
    <TitleComponents title="标题" desc="描述描述描述描述描述"></TitleComponents> 
  </div>
</template>

<script>
import TitleComponents from './TitleComponents.vue'
  export default {
    components:{
      TitleComponents
    }
  }
</script>

<style scoped>

</style>

子组件 TitleComponents.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <div>{{ desc }}</div>
    <slot>
      <div>这里是默认内容</div>
    </slot>
  </div>
</template>

<script>
  export default {
    props:{
      title:{
        type:String,
        default:'默认标题'
      },
      desc:{
        type:String,
        default:''
      }
    }
  }
</script>

<style scoped>

</style>

插槽_具名插槽

父组件

<template>
  <div>
    <NavComponent>
      <template v-slot:left>
        <button>返回</button>
      </template>
      <template v-slot:center>
        首页
      </template>
      <template v-slot:right>
        <a href="#" >登录</a>
      </template>
    </NavComponent>
    <NavComponent>
      <template v-slot:[position]>
        <button>返回</button>
      </template>
    </NavComponent>
    <button @click="position = 'left'">左边</button>
    <button @click="position = 'center'">中间</button>
    <button @click="position = 'right'">右边</button>
  </div>
</template>

<script>
  import NavComponent from './NavComponent.vue';
  export default {
    components:{
      NavComponent
    },
    data(){
      return {
        position:'left'
      }
    }
  }
</script>

<style scoped>

</style>

**子组件 NavComponent.vue **

<template>
  <div>
    <div style="display: flex;flex-direction: row;height: 100px;">
      <div class="left"> 
        <slot name="left">左边</slot>   
      </div>
      <div class="center">  
        <slot name="center">中间</slot> 
      </div>
      <div class="right">
        <slot name="right">右边</slot>
      </div>
    </div>
  </div>
</template>

<script>
  
  export default {

  }
</script>

<style scoped>
  .left{
    width:30%;
    background-color: aqua;
  }
  .center{
    width: 40%;
    background-color: bisque;
  }
  .right{
    width: 30%;
    background-color: blueviolet;
  }
</style>

组件插槽_作用域插槽

父组件

<template>
  <div>
    <NavComponet :nav_list="nav_list">
      <template v-slot:default="porps_val">
        {{ porps_val.item }}---{{ porps_val.abc }}
      </template>
    </NavComponet>
    <!--  -->
    <hr>
    <NavComponet :nav_list="nav_list">
      <template #default="porps_val">
        <a href="#">{{ porps_val.item }}---{{ porps_val.abc }}</a>
      </template>
    </NavComponet>
  </div>
</template>

<script>
  import NavComponet from './NavComponet.vue'
  export default {
    components:{
      NavComponet
    },
    data(){
      return {
        nav_list:[
          {id:1,title:'标题1'},
          {id:1,title:'标题2'},
          {id:1,title:'标题3'},
        ]
      }
    }
  }
</script>

<style scoped>

</style>

子组件 NavComponet.vue

<template>
  <div>
    <div class="nav">
      <div v-for="(item,index) in nav_list" :key="index" class="nav_item">
        <div>
          {{ item.title }}
        </div>
        <slot :item="item.title" abc="cba">
          <div>{{ item.title }}</div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      nav_list:{
        type:Array,
        default:()=>{
          return [
          {id:1,title:'衣服'},
          {id:1,title:'食物'},
          {id:1,title:'玩具'},
        ];
        }
      }
    },
    data(){
      return {
      }
    }
  }
</script>

<style scoped>
  .nav{
    display: flex;
    flex-direction: row;
  }
  .nav_item{
    flex:1;
  }
</style>

Provide和Inject

App.vue

<template>
  <div class="app">
    <home-component></home-component>
    <h2>app:{{ message }}</h2>
    <button @click="message = 'hello world'">改变message</button>
  </div>
</template>
 
<script>
  import { computed  } from 'vue'
  import HomeComponent from './HomeComponent.vue'
  export default {
     components:{
      HomeComponent
     },
     data(){
      return {
        message:"Hello App"
      }
     },
     provide(){
      return {
        name:"why",
        age:18,
        message:computed(()=>{
          return this.message
        }) 
      }
     }
  }
</script>

<style scoped>

</style>

**子组件 HomeBanner.vue **

<template>
  <div>
    <h2>HomeBanner:{{ name }} - {{ age }} - {{ message }}</h2>
  </div>
</template>
 
<script>
  export default {
    inject:["name","age","message"]
  }
</script>

<style scoped>

</style>

孙组件 HomeComponent.vue

<template>
  <div>
    <home-banner></home-banner>
  </div>
</template>

<script>
  import HomeBanner from './HomeBanner.vue';
  export default {
    components:{
      HomeBanner
    },
    data(){
      return {
        
      }
    }
  }
</script>

<style scoped>

</style>

事件总线的使用

App.vue

<template>
  <div class="app">
    <!-- 安装状态管理库 npm install hy-event-store -->
    <!-- Mitt事件状态（略） -->
    <HomeCon></HomeCon>  
    <h2>{{ message }}</h2>
    <button @click="show_cate_gory = !show_cate_gory">是否显示cate_gory</button>
    <cate-gory v-if="show_cate_gory"></cate-gory>
  </div>
</template>
 
<script>
  import eventBus from './utils/event.bus';
  import HomeCon from './HomeCon.vue'
  import CateGory from './CateGory.vue'
  export default {
     components:{
      HomeCon,
      CateGory
     },
     data(){
      return {
        message:'hello vue',
        show_cate_gory:true
      }
     },
     created(){
      // 事件监听
      eventBus.on("whyEvent",(name,age,height)=>{
        console.log("whyEvent事件在app中的监听",name,age,height)
        this.message = `name:${name},age:${age},height:${height}`
      })
     }
  }
</script>

<style scoped>

</style>

** 子组件 CateGory.vue**

<template>
  <div>
    <h2>Category</h2>
  </div>
</template>

<script>
  import eventBus from './utils/event.bus.js'
  export default {
    methods:{
      whyEventHandler(){
        console.log("whyEvent在category中监听")
      }
    },
    created(){
      eventBus.on("whyEvent",this.whyEventHandler)
    },
    unmounted(){
      console.log("category umounted")
      eventBus.off("whyEvent",this.whyEventHandler)
    }
  }
</script>

<style scoped>

</style>

**子组件 HomeBanner.vue **

<template>
  <div>
    <button @click="bannerBtnClick">banner按钮</button>
  </div>
</template>
 
<script>
  import eventBus  from './utils/event.bus';
  export default {
    methods:{
      bannerBtnClick(){
        console.log("bannerBtnClick")
        eventBus.emit("whyEvent","why",18,1.88)
      }
    }
  }
</script>

<style scoped>

</style>

** 子组件 HomeCon.vue**

<template>
  <div>
    <home-banner></home-banner>
  </div>
</template>

<script>
  import HomeBanner from './HomeBanner.vue';
  export default {
    components:{
      HomeBanner
    },
    data(){
      return {
        
      }
    }
  }
</script>

<style scoped>

</style>

事件总线 event.bus.js

import { HYEventBus } from "hy-event-store"

const eventBus = new HYEventBus()

export default eventBus

生命周期函数演练

App.vue

<template>
  <div>
    <h2>{{ message }}---{{ counter }}</h2>
    <button @click="message = 'hello world'" >修改message</button>
    <button @click="counter++">+1</button>
    <button @click="showHome = !showHome">隐藏home</button>
    <home-com v-if="showHome"></home-com>
  </div>
</template>

<script>
  import HomeCom from "./HomeCom.vue"
  export default {
    components:{
      HomeCom
    },
    data(){
      return {
        message:'hello vue',
        counter:1,
        showHome:true
      }
    },
    // 1.组件创建之前
    beforeCreate(){
      console.log("beforeCreate")
    },
    // 2.组件被创建完成
    created(){
      console.log("组件被创建完成：created")
      console.log("1.发送网络请求，请求数据")
      console.log("2.监听eventbus事件")
      console.log("3.监听watch数据")
    },
    // 3. 组件template准备被挂在
    beforeMount(){
      console.log("beforeMount")
    },
    // 4.组件template被挂载，虚拟dom=》真实dom
    mounted(){
      console.log("mounted")
      console.log("1.获取DOM")
      console.log("2.使用DOM")
    },
    // 5.数据发生改变
    // 5.1 准备更新DOM
    beforeUpdate(){
      console.log("beforeUpdate")
    },
    // 5.2 更新DOM
    updated(){
      console.log("updated")
    },
    // 6.卸载Vnode-》DOM原生
    // 6.1 卸载之前
    beforeUnmount(){
      console.log("beforeUnmount")
    },
    // 6.2 DOM元素被卸载完成
    unmounted(){
      console.log("unmounted")
    }
  }
</script>

<style scoped>

</style>

子组件 HomeCom.vue

<template>
  <div>
    Home
  </div>
</template>

<script>
  export default {
    unmounted(){
      console.log("unmounted home")
    },
    beforeUnmount(){
      console.log("beforeUnmout home")
    }
  }
</script>

<style scoped>

</style>

ref获取元素组件

App.vue

<template>
  <div>
    <h2 ref="title" class="title" :style="{color:titleColor}">{{ message }}</h2>
    <button ref="btn" @click="changeTitle">修改title</button>
    
    <BannerCom ref="banner"></BannerCom>
    <BannerCom ref="banner"></BannerCom>
    <BannerCom ref="banner"></BannerCom>
    <BannerCom ref="banner"></BannerCom>
    <BannerCom ref="banner"></BannerCom>
  
  </div>
</template>

<script>
 import BannerCom from './BannerCom.vue';
  export default {
    components:{
      BannerCom
    },
      data(){
        return {
          message:"hello world",
          titleColor:"red"
        }
      },
      methods:{
        changeTitle(){
          // 1.不要主动去获取DOM，并且修改DOM内容
          this.message = "你好啊，世界"
          this.titleColor = "blue"

          // 2.获取h2/button元素
          console.log(this.$refs.title)
          console.log(this.$refs.btn)

          // 3.获取banner组件：组件实例
          console.log(this.$refs.banner)
          // 3.1在父组件中可以主动的调用子组件的方法
          this.$refs.banner.bannerClick()

          // 3.2 获取banner组件实例，获取banner中的元素
          console.log(this.$refs.banner.$el)

          // 3.3 如果banner template是多个根，拿到的是一个node节点
          console.log(this.$refs.banner.$el.nextElementSibling)
          // 第二个node节点
          console.log(this.$refs.banner.$el.previousElementSibling)
        
          // 4.组件实例了解
          console.log(this.$parent); // 父组件
          console.log(this.$root); //根组件
        }
      }
  } 
</script>

<style scoped>

</style>

**子组件 BannerCom.vue **

<template>
  <div class="banner">
    Banner
  </div>
  <div class="banner2"></div>
</template>

<script>
  export default {
    methods:{
      bannerClick(){
        console.log('bannerClick')
      }
    }
  }
</script>

<style scoped>

</style>

内置组件的使用

App.vue

<template>
  <div>
    <button v-for="(item,index) in tab_arr" :style="default_tab == item ? 'color:red;' : ''" :key="index" @click="show_tab(item)">
      {{ item }}
    </button>
    <!-- 第一中方法 -->
    <!-- <div v-if="default_tab=='home'">
      <HomeCom></HomeCom>
    </div>
    <div v-if="default_tab=='about'">
      <AboutCom></AboutCom>
    </div>
    <div v-if="default_tab=='category'">
      <CategoryCom></CategoryCom>
    </div> -->
    
    <!-- 第二种方式 -->
    <component name="kb" age="20" @homebtn="homebtn" :is="default_tab"></component>
  </div>
</template>

<script>
 import HomeCom from './views/HomeCom.vue'
 import AboutCom from './views/AboutCom.vue'
 import CategoryCom from './views/CategoryCom.vue'
  export default {
     components:{
      HomeCom,
      AboutCom,
      CategoryCom
     },
     data(){
      return {
        tab_arr:['HomeCom','AboutCom','CategoryCom'],
        default_tab:'HomeCom'
      }
    },
    methods:{
      show_tab(item){
        this.default_tab = item
      },
      homebtn(eve){
        console.log('homebtn',eve)
      }
    }
  }
</script>

<style scoped>

</style>

** 子组件 AboutCom.vue**

<template>
  <div>
    about组件
  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>

</style>

子组件 CategoryCom.vue

<template>
  <div>
    category组件
  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>

</style>

子组件 HomeCom.vue

<template>
  <div>
    
    home组件{{ name }} --- {{ age }}
    <button @click="homebtn">homebtn</button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        
      }
    },
    props:{
      name:{
        type:String,
        default:'why'
      },
      age:{
        type:String,
        default:'18'
      }
    },
    emits:['homebtn'],
    methods:{
      homebtn(){
        this.$emit('homebtn','home')
      }
    }
  }
</script>

<style scoped>

</style>

Keep-Alive的使用-分包

App.vue

<template>
  <div>
    <button v-for="(item,index) in tab_arr" :style="default_tab == item ? 'color:red;' : ''" :key="index" @click="show_tab(item)">
      {{ item }}
    </button>
    <!-- 第一中方法 -->
    <!-- <div v-if="default_tab=='home'">
      <HomeCom></HomeCom>
    </div>
    <div v-if="default_tab=='about'">
      <AboutCom></AboutCom>
    </div>
    <div v-if="default_tab=='category'">
      <CategoryCom></CategoryCom>
    </div> -->
    
    <!-- 第二种方式 -->
    <KeepAlive include="HomeCom,AboutCom">
      <component :is="default_tab"></component>
    </KeepAlive>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
 import HomeCom from './views/HomeCom.vue'
 import AboutCom from './views/AboutCom.vue'
//  import CategoryCom from './views/CategoryCom.vue'
 const AsyncCategory = defineAsyncComponent(()=>import("./views/CategoryCom.vue"))
  export default {
     components:{
      HomeCom,
      AboutCom,
      CategoryCom:AsyncCategory
     },
     data(){
      return {
        tab_arr:['HomeCom','AboutCom','CategoryCom'],
        default_tab:'HomeCom'
      }
    },
    methods:{
      show_tab(item){
        this.default_tab = item
      },
      homebtn(eve){
        console.log('homebtn',eve)
      }
    }
  }
</script>

<style scoped>

</style>

子组件 AboutCom.vue

<template>
  <div>
    about组件
  </div>
</template>

<script>
  export default {
    name:"AboutCom",
    created(){
      console.log('about created')
    },
    unmounted(){
      console.log('about unmounted')
    },
  }
</script>

<style scoped>

</style>

**子组件 CategoryCom.vue **

<template>
  <div>
    category组件
  </div>
</template>

<script>
  export default {
    created(){
      console.log('category created')
    },
    unmounted(){
      console.log('category unmounted')
    },
  }
</script>

<style scoped>

</style>

子组件 HomeCom.vue

<template>
  <div>
    home组件
    <div>
      计数：{{ counter }}
    </div>
    <button @click="jia">加1</button>
  </div>
</template>

<script>
  export default {
    name:"HomeCom",
    data(){
      return {
        counter:0
      }
    },
    created(){
      console.log('home created')
    },
    unmounted(){
      console.log('home unmounted')
    },
    // 对于保持keep-alive组件，监听有没有进行切换
    // keep-alive组件进入活跃状态
    activated(){
      console.log('home activated')
    },
    deactivated(){
      console.log('home deactivated')
    },  
    methods:{
      jia:function(){
        this.counter++;
      }
    }
  }
</script>

<style scoped>

</style>

组件的v-model

App.vue

<template>
  <div class="app">
    <!-- 1.input v-model -->
    <!-- <input type="text" v-model="message"> -->
    <!-- <input type="text" :value="message" @input="message = $event.target.value"> -->

    <!-- <CounterCom :modelValue="appCounter" @update:modelValue="appCounter = $event"></CounterCom> -->
    <!-- <CounterCom v-model="appCounter"></CounterCom> -->
    <CounterCom2 v-model:counter="appCounter" v-model:why="why"></CounterCom2>
  </div>
</template>

<script>
  import CounterCom2 from './CounterCom2.vue'
  export default {
    components:{
      CounterCom2
    },
    data(){
      return {
        message:'hello',
        appCounter:"100",
        why:'coderwhy'
      }
    }
  }
</script>

<style scoped>

</style>

**子组件 CounterCom.vue **

<template>
  <div>
    counter
    <div>
      modelValue:{{ modelValue }}
    </div>
    <button @click="changeCounter">修改counter</button>
  </div>
</template>

<script>
  export default {
    props:{
      modelValue:{
        type:String,
        default:''
      }
    },
    emits:["update:modelValue"],
    methods:{
      changeCounter(){
        this.$emit("update:modelValue",'999999')
      }
    }
  }
</script>

<style scoped>

</style>

子组件 CounterCom2.vue

<template>
  <div>
    <div>
      counter:{{ counter }}
    </div>
    <button @click="changeCounter">修改counter</button>
    <div>
      why:{{ why }}
    </div>
    <button @click="changeWhy">修改why的值</button>
  </div>
</template>

<script>
  export default {
    props:{
      counter:{
        type:String,
        default:''
      },
      why:{
        type:String,
        default:''
      }
    },
    emits:["update:counter","update:why"],
    methods:{
      changeCounter(){ 
        this.$emit("update:counter",'999999')
      },
      changeWhy(){
        this.$emit("update:why",'kobi')
      }
    }
  }
</script>

<style scoped>

</style>

组件的混入Mixin

message-mixin.js

export default {
  data(){
    return {
      message:"Hello World"
    }
  },
  created(){
    console.log("message:",this.message)
  }
}

**App.vue **

<template>
  <div>
    <HomeCon></HomeCon>
    <AboutCon></AboutCon>
    <CatetoryCon></CatetoryCon>
  </div>
</template>

<script>
  import HomeCon from './views/HomeCon.vue'
  import AboutCon from './views/AboutCon.vue'
  import CatetoryCon from './views/CatetoryCon.vue'
  export default {
    components:{
      HomeCon,
      AboutCon,
      CatetoryCon
    }
  }
</script>

<style scoped>

</style>

子组件 AboutCon.vue

<template>
  <div>
    <h2>AboutCon组件</h2>
  </div>
</template>

<script>
import messageMixin from  '../mixins/message-mixin'
  export default {
    mixins:[messageMixin]
  }
</script>

<style scoped>

</style>

子组件 CatetoryCon.vue

<template>
  <div>
    <h2>CatetoryCon组件</h2>
  </div>
</template>

<script>
import messageMixin from  '../mixins/message-mixin'
  export default {
    mixins:[messageMixin]
  }
</script>

<style scoped>

</style>

子组件 HomeCon.vue

<template>
  <div>
    <h2>HomeCon组件</h2>
  </div>
</template>

<script>
import messageMixin from  '../mixins/message-mixin'
  export default {
    mixins:[messageMixin]
  }
</script>

<style scoped>

</style>

感谢观看，我们下次再见文章来源地址https://www.toymoban.com/news/detail-743613.html

到了这里，关于Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！