Vue3.X组件第二讲

前言

Vue3.X组件的学习

一、Vue3.x组件

1. Vue3.x父组件给子组件传值

1.1 单项数据传递

父组件:
业务逻辑:

import header from './components/header';
export default {
  components:{
    "c-header":header
  },
  data(){
    return{
      hody:[
        {
          "title":"文学1"
        },
        {
          "title":"文学2"
        },
        {
          "title":"文学3"
        }
      ]
    }
  }
}

template模板:

<c-header :hody="hody"></c-header>

子组件:
业务逻辑:

export default {
  name: "header",
  props: ["hody"],
  data() {
    return {
      checkArray: []
    }
  },
  methods: {
    getCheckbox: function (event, val) {
      if (event.target.checked) {
        this.checkArray.push(val);
      } else {
        this.checkArray = this.checkArray.filter(c => c != val);
      }
      console.log(...this.checkArray)
    }
  }
}

template模板:

 <span v-for="(item,index) in hody" :key="index" onload="initLoad">
   <input type="checkbox" :id="'check'+index" @click="getCheckbox($event,item.title)">
   <label :for="'check'+index">{{ item.title }}</label>
 </span>

1.2 父子组件主动获取数据或调用方法

1.2.1 父组件主动获取子组件数据或调用子组件方法

父组件:
业务逻辑:

import footer from './components/footer';
export default {
  components:{
    "c-footer":footer
  },
  data(){
    return{
      msg:"",
      msgMethod:""
    }
  },
  methods:{
    onclick(){
      this.msg=this.$refs.ft.msg;
      this.msgMethod=this.$refs.ft.getChildMehotd();
    }
  }
}

template模板:

  <c-footer ref="ft"/>
  <button @click="onclick">父组件主动获取子组件</button>
  {{msg}}
  {{msgMethod}}

子组件:
业务逻辑:

export default {
name: "footer",
  data(){
    return{
      msg:'我是footer',
      checkArray:[]
    }
  },
  methods: {
    getChildMehotd() {
      return '我是子方法'
    }
  }
}

1.2.2 子组件主动获取父组件数据或调用父组件方法

父组件:
业务逻辑:

import childrenHeader from "@/components/childrenHeader";
export default {
  components:{
    childrenHeader
  },
  data(){
    return {
      msg: "我是父属性"
    }
  },
  methods:{
    parentMehotd(){
      return '我是父方法'
    }
  }
}

template模板:

  <children-header ref="ch"></children-header>

子组件:
业务逻辑:

export default {
  name: "childrenHeader",
  data() {
    return {
      msg: "",
      msgMethod: ""
    }
  },
  methods:{
    getParent(){
      this.msg=this.$parent.msg,
      this.msgMethod=this.$parent.parentMehotd()
    }
  }
}

template模板:

  <button @click="getParent">获取父方法</button>
  {{ msg }}
  {{ msgMethod }}

1.3 自定义事件进行子组件传给父组件

父组件:
业务逻辑:

import header from "@/components/header";
export default {
  name:"App",
  components:{
    "c-header":header
  },
  methods:{
    getChildren(val){
      alert(val)
    }
  }
}

template模板:

  <c-header @run-parent="getChildren"></c-header>

子组件:
业务逻辑:

export default {
  name:"header",
  methods:{
    sendChildren(){
      this.$emit('run-parent','我是子组件');
    }
  }
}

template模板:

<button @click="sendChildren">子组件传递父组件</button>

1.4 Vue3.x第三方插件mitt 实现非父子组件传值

1.4.1 安装mitt

 npm install --save mitt

1.4.2 注册mit

创建文件model/event.js

import mitt from 'mitt'
const VueEvent = mitt();
export default VueEvent;

1.4.3 各组件配置

header组件业务逻辑:

<script>
import VueEvent from '../model/event'
export default {
  data() {
    return {}
  },
  methods: {
    sendData() {
      VueEvent.emit("sendData","数据");
    }
  }
}
</script>

template模板:

<template>
  <div>
    <button @click="sendData">非父子组件传值</button>
  </div>
</template>

user组件业务逻辑:

import VueEvent from '../model/event'
export default {
  data(){
    return{
      msg:""
    }
  },
  mounted() {
    VueEvent.on("sendData", (val) => {
      this.msg=val;
    })
  }
}

template模板:

{{msg}}

1.4.4 注册组件

App.vue业务逻辑:

<script>
import header from "@/components/header";
import user from "@/components/user";
export default {
  name:'App',
  components:{
    "c-header":header,
    "c-user":user
  }
}
</script>

template模板:

  <c-header/>
  <c-login/>