达成效果:
- 在子组件里触发input时, 父组件里的data会改变
- 改变父组件data时,子组件里面data和input.value也会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 复习 -->
<div id='app'>
<h1>父组件中的data:{
{
num1}}</h1>
<cpn :son_num1="num1" :son_num2="num2" @num1change="num1change"></cpn>
</div>
<template id="cpn">
<div>
<h2>props里son_num1: {
{
son_num1}}</h2>
<h2>子组件data里ds_num1: {
{
ds_num1}}</h2>
<input type="text" v-model="ds_num1">
<!-- <input type="text" v-model="son_num1"> 会报错 -->
<!-- 下面通过v-bind和@input手动实现v-model,以便在@input触发的事件里添加更多功能 -->
<input type="text" v-bind:value="ds_num1" @input="num1input">
</div>
</template>
<script>
const cpn = {
template: '#cpn',
//pros只读,它的值更父组件data里数据绑定; 直接v-model="son_num1"会报错;
props: {
son_num1: Number,
son_num2: Number,
},
data() {
//初始化,后续可更改
return {
ds_num1: this.son_num1,
ds_num2: this.son_num2,
}
},
methods: {
num1input(event) {
//想在同时触发num1change事件,目的是更改父组件里的data
this.ds_num1 = event.target.value;
console.log('点了');
this.$emit("num1change", this.ds_num1);
}
},
}
const app = new Vue({
el: '#app',
data: {
num1: 1,
num2: 2,
},
methods: {
num1change(value) {
console.log(value);
this.num1 = parseInt(value);
},
num2Change(value) {
this.num2 = value;
}
},
components: {
cpn
},
});
</script>
<style lang='scss' scoped>
</style>
</body>
</html>