Vue组件化开发父子组件传递结合v-model（笔记二）
2020-10-02 本文已影响0人
似朝朝我心
组件调用的语法糖
<com></com> 如果中间没有内容的话，可以简写成<com/> 单标签的形式。
组件里面的data必须是函数。
父传子props推荐是对象形式，而不是数组。
父子组件传递结合v-model实例，当我们在子组件中修改了父组件传给子组件的属性（官方是不推荐子组件修改父组件传值），最终页面效果是可以实现展示的，但修改是不推荐的，会报如下错误。
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue实例模板（父组件） -->
<div id="app">
<!-- 调用已经注册的子组件 -->
<mycom :number1="num1" :number2="num2"></mycom>
</div>
<!-- 子组件模板 -->
<template id="com">
<div>
<h2>{{number1}}</h2>
<input type="text" v-model="number1">
<h2>{{number2}}</h2>
<input type="text" v-model="number2">
</div>
</template>
<script>
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
num1: 1,
num2: 0
}
},//子组件
components: {
mycom: {
template: '#com',
props: {
number1: Number,
number2: Number
}
}
}
})
</script>
</body>
</html>
报错提示我们因该这样做，根据父组件传给的值，创建一个初始化data或者计算属性。
修改后代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue实例模板（父组件） -->
<div id="app">
<!-- 调用已经注册的子组件 -->
<mycom :number1="num1" :number2="num2"></mycom>
</div>
<!-- 子组件模板 -->
<template id="com">
<div>
<h2>原来props传递的值：{{number1}}</h2>
<h2>使用了data函数后传递的值：{{dnumber1}}</h2>
<input type="text" v-model="dnumber1">
<h2>原来props传递的值：{{number2}}</h2>
<h2>使用了data函数后传递的值：{{dnumber2}}</h2>
<input type="text" v-model="dnumber2">
</div>
</template>
<script>
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
num1: 1,
num2: 0
}
},//子组件
components: {
mycom: {
template: '#com',
props: {
number1: Number,
number2: Number
},
data() {
return {
dnumber1:this.number1,
dnumber2:this.number2
}
},
}
}
})
</script>
</body>
</html>
这样就不会报上面的错误了。
因为我们用v-model双向绑定了input输入框,当用户输入了内容后，我们想通过子组件返回给父组件一个信息，通知它改掉自己的num1和num2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue实例模板（父组件） -->
<div id="app">
<!-- 调用已经注册的子组件 -->
<mycom
:number1="num1"
:number2="num2"
@num1change="num1change"
@num2change="num2change"
/>
</div>
<!-- 子组件模板 -->
<template id="com">
<div>
<h2>原来props传递的值：{{number1}}</h2>
<h2>使用了data函数后传递的值：{{dnumber1}}</h2>
<!-- <input type="text" v-model="dnumber1"> -->
<!-- <input type="text" :value="dnumber1" @input="dnumber1=$event.target.value">不适合复杂的操作 -->
<input type="text" :value="dnumber1" @input="num1Input">
<h2>原来props传递的值：{{number2}}</h2>
<h2>使用了data函数后传递的值：{{dnumber2}}</h2>
<!-- <input type="text" v-model="dnumber2"> -->
<!-- <input type="text" :value="dnumber2" @input="dnumber2=$event.target.value"> -->
<input type="text" :value="dnumber1" @input="num2Input">
</div>
</template>
<script>
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
num1: 1,
num2: 0
}
},
methods: {
num1change (value) {
//console.log(typeof value)
//this.num1 = parseFloat(value) 转换字符串类型
this.num1 = parseInt(value)
},
num2change (value) {
this.num2 = parseInt(value)
}
},
//子组件
components: {
mycom: {
template: '#com',
props: {
number1: Number,
number2: Number
},
data() {
return {
dnumber1:this.number1,
dnumber2:this.number2
}
},
methods: {
num1Input (event) {
//1.将input中的value值赋给dnumber1
this.dnumber1 = event.target.value;
//2.为了让父组件可以修改值，发出一个字定义事件
this.$emit('num1change', this.dnumber1)
//3.同时修改dnumber2的值
this.dnumber2 = this.dnumber1 * 100
this.$emit('num2change', this.dnumber2)
},
num2Input (event) {
this.dnumber2 = event.target.value;
this.$emit('num2change', this.dnumber2)
this.dnumber1 = this.dnumber2 / 100
this.$emit('num1change', this.dnumber1)
}
},
}
}
})
</script>
</body>
</html>
用回v-model结合watch侦听属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue实例模板（父组件） -->
<div id="app">
<!-- 调用已经注册的子组件 -->
<mycom
:number1="num1"
:number2="num2"
@num1change="num1change"
@num2change="num2change"
/>
</div>
<!-- 子组件模板 -->
<template id="com">
<div>
<h2>原来props传递的值：{{number1}}</h2>
<h2>使用了data函数后传递的值：{{dnumber1}}</h2>
<!-- <input type="text" :value="dnumber1" @input="num1Input"> -->
<input type="text" v-model="dnumber1">
<h2>原来props传递的值：{{number2}}</h2>
<h2>使用了data函数后传递的值：{{dnumber2}}</h2>
<input type="text" v-model="dnumber2">
<!-- <input type="text" :value="dnumber1" @input="num2Input"> -->
</div>
</template>
<script>
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
num1: 1,
num2: 0
}
},
methods: {
num1change (value) {
//console.log(typeof value)
//this.num1 = parseFloat(value) 转换字符串类型
this.num1 = parseInt(value)
},
num2change (value) {
this.num2 = parseInt(value)
}
},
//子组件
components: {
mycom: {
template: '#com',
props: {
number1: Number,
number2: Number,
name: ''
},
data() {
return {
dnumber1:this.number1,
dnumber2:this.number2
}
},
watch: {
// name (newValue, oldValue) {
// },
dnumber1 (newValue) {
this.dnumber2 = newValue * 100
this.$emit('num1change', newValue)
},
dnumber2 (newValue) {
this.dnumber1 = newValue / 100
this.$emit('num2change', newValue)
}
},
}
}
})
</script>
</body>
</html>
