Vue3.X的父子组件、自定义组件，非父子组件获取与传值

2023-11-07 18:12•javascript•阅读 320

组件间传值及传值校验

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>study</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div ></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return { num: 1111 }
    },
    template: `
      <div><test :content="num" /></div>
    `
  });

  // type:String, Boolean, Array, Object, Function, Symbol
  // validator 校验
  // required 必填
  // default 默认值
  app.component('test', {
    props: {
      content: {
        type: Number,
        validator: function(value) {
          return value < 500;
        },
        default: function() {
          return 456;
        }
      }
    },
    template: `<div>{{content}}</div>`
  });

  const vm = app.mount('#root');
</script>
</html>

父组件获取子组件的数据和执行子组件方法

调用子组件的时候定义一个 ref

<v-header ref="header" />

父组件获取子组件数据

this.$refs.header.属性

父组件执行子组件的方法

this.$refs.header.方法

子组件获取父组件的数据和执行父组件方法

子组件获取父组件的数据

this.$parent.数据

子组件获取父组件的方法

this.$parent.方法

Vue3.x 父组件自定义事件，子组件给父组件传值

子组件获取父组件的方法
父组件中声明自定义方法

<template>
    <div>
        <v-header @send="getChild"></v-header>
    </div>
</template>
<script>
import Header from "./Header"

export default {
    data() {
        return {
            title: "首页组件"
        }
    },
    methods: {
        getChild(data) {
            console.log(data + "home")
        }
    },
    components: {
        "v-header": Header
    }
}
</script>

<style >
</style>

子组件通过this.$emit调用该自定义的方法

<template>
    <div>
        <h2>头部组件
            --- <button @click="sendParent">执行父组件的自定义事件</button>
        </h2>
    </div>
</template>
<script>
export default {
    // 建议定义所有发出的事件，以便更好地记录组件应该如何工作
    emits: ["send"],
    data() {
        return {
            msg: "头部组件"
        }
    },
    methods: {
        sendParent() {
            // this.$emit("send")
            this.$emit("send", this.msg)
        }
    }
}
</script>

<style >
h2 {
    text-align: center;
    background: #000;
    height: 44px;
    line-height: 44px;
    color: white;
}
</style>

比较高级的使用方式：

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>study</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div ></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return { count: 1 }
    },
    template: `
      <counter v-model="count" />
    `
  });

  app.component('counter', {
    props: ['modelValue'],
    methods: {
      handleClick() {
        this.$emit('update:modelValue', this.modelValue + 1);
      }
    },
    template: `
      <div @click="handleClick">{{modelValue}}</div>
    `
  });

  const vm = app.mount('#root');
</script>
</html>

双向绑定高级部分

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 19</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div ></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 'a',
      }
    },
    template: `
      <counter v-model.uppercase="count" />
    `
  });

  app.component('counter', {
    props: {
      'modelValue': String,
      'modelModifiers': {
        default: ()=> ({})
      }
    },
    methods: {
      handleClick() {
        let newValue = this.modelValue + 'b';
        if(this.modelModifiers.uppercase) {
          newValue = newValue.toUpperCase();
        }
        this.$emit('update:modelValue', newValue);
      },
    },
    template: `
      <div @click="handleClick">{{modelValue}}</div>
    `
  });

  const vm = app.mount('#root');
</script>
</html>

非父子组件传值

非父子组件传值，借用 mitt 三方件
先安装 mitt 插件：
npm install mitt --save
实例化 mitt
mitt 的使用：<https://www.npmjs.com/package/mitt

import mitt from 'mitt';

const event = mitt();

export default event;

组件 A

<template>
    <div>
        <h2>头部组件
            ----- <button @click="sendLogin">触发登录组件里面的事件 实现传值</button>
        </h2>
    </div>
</template>
<script>
import event from "../model/event"

export default {
    data() {
        return {
            msg: "头部组件"
        }
    },
    methods: {
        sendLogin() {
            //广播事件
            event.emit("toLogin", {
                username: "张三",
                age: 20
            })
        }
    }
}
</script>

<style >
h2 {
    text-align: center;
    background: #000;
    height: 44px;
    line-height: 44px;
    color: white;
}
</style>

组件 B

<template>
    <div class="login">
        <input type="text" v-model="username" placeholder="用户名" />
        <br>
        <input type="text" v-model="password" placeholder="密码" />
        <br>
        <button @click="doLogin">执行登录</button>
    </div>
</template>
<script>
import event from "../model/event"
export default {
    emits: {
        submit: ({ username, password }) => {
            if (username !== "" && password !== "") {
                return true
            } else {
                console.log("用户名密码不能为空")
                return false
            }
        }
    },
    data() {
        return {
            username: "",
            password: ""
        }
    },
    methods: {
        doLogin() {
            this.$emit("submit", {
                username: this.username,
                password: this.password
            })
        }
    },
    mounted() {
        //监听广播
        event.on("toLogin", (data) => {
            console.log(data)
        })
    }
}
</script>

<style >
.login {
    padding: 20px;
}
</style>

持续更新中......

上一篇 »vue实现组件数据双向绑定
下一篇 »Bootstrap table 父子表默认展开