1.父子组件之间的通信
属性传的时候，使用 content-abc 这种命名，接的时候，使用 contentAbc 命名。
单项数据流的概念: 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo1</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// v-bind="params"
// :content="params.content" :a="params.a" :b="params.b" :c="params.c"
// 属性传的时候，使用 content-abc 这种命名，接的时候，使用 contentAbc 命名
// 单项数据流的概念: 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据
const app = Vue.createApp({
data() {
return { num: 1 }
},
template: `
<div>
<counter :count="num" />
<counter :count="num" />
<counter :count="num" />
</div>
`
});
app.component('counter', {
props: ['count'],
template: `<div @click="count += 1">8</div>`
});
const vm = app.mount('#root');
</script>
</html>
2.子组件向父组件发送调用请求-父子直接通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo2</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return { count: 1 }
},
methods: {
handleAddOne() {
this.count += 1;
}
},
template: `
<div><counter v-bind:count="count" @add-one="handleAddOne" /></div>
`
});
app.component('counter', {
props: ['count'],
methods: {
handleClick() {
this.$emit("addOne");
}
},
template: `
<div @click="handleClick">8</div>
`
});
const vm = app.mount('#root');
</script>
</html>
2.子组件向父组件发送调用请求并传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo3</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return { count: 1 }
},
methods: {
handleAddOne(param1, param2) {
this.count += param2;
}
},
template: `
<div><counter v-bind:count="count" @add-one="handleAddOne" /></div>
`
});
app.component('counter', {
props: ['count'],
methods: {
handleClick() {
this.$emit("addOne", 2, 3);
}
},
template: `
<div @click="handleClick">8</div>
`
});
const vm = app.mount('#root');
</script>
</html>
3.子组件对传递参数进行校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo4</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return { count: 1 }
},
methods: {
handleAddOne(param1, param2) {
this.count += param2;
}
},
template: `
<div><counter v-bind:count="count" @add-one="handleAddOne" /></div>
`
});
app.component('counter', {
props: ['count'],
emits: {
addOne: function(count) {
if (count < 0) {
return true;
}
return false;
}
},
methods: {
handleClick() {
this.$emit("addOne", 2, 3);
}
},
template: `
<div @click="handleClick">8</div>
`
});
const vm = app.mount('#root');
</script>
</html>