Vue3.X的父子组件、自定义组件,非父子组件获取与传值
组件间传值及传值校验
<!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 父子表默认展开