父子组件通信小结以及双向数据绑定问题
1.先扯个淡
学习了一天的Vue组件化开发,脑瓜子嗡嗡的。遇事不要慌，先去吃个快餐。吃饱才有力气扯淡，程序员还是应该以身体为重。鄙人健身三年，有喜欢运动的小伙伴欢迎私聊深入交流一下。
2.步入正题，有这样一个需求：
1.子组件可以获取父组件的data数据 2.子组件中的输入框可以修改获取到的data数据 3.子组件在修改获取到的数据同时反过来改变父组件的data数据
3.实现过程
1.首先子组件获取父组件的data数据相信大家一定不陌生，只需要通过props自定义属性即可。(prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”)
<body>
<div id="app">
<cpn :number1="num1" :number2="num2" ></cpn>
</div>
<template id="cpn">
<div>
<h2>{{number1}}</h2>
<h2>{{number2}}</h2>
</div>
</template>
<script> var vm = new Vue({
el: '#app',
data: {
num1:1,
num2:0
},
components:{
cpn:{
template:'#cpn',
props:{
number1:Number,
number2:Number
},
}
}
}); </script>
</body>
很简单的操作 输出成功：
2.接下来 我们要通过input输入框改变props中获取的数据内容，很多人会想到通过v-model实现数据双向绑定。那么可行吗？可行，但是会有一点小问题。 修改template标签内容 通过v-model绑定number1和number2
<template id="cpn">
<div>
<h2>{{number1}}</h2>
<input type="text" v-model="number1">
<h2>{{number2}}</h2>
<input type="text" v-model="number2">
</div>
</template>
输出结果如下：
可以看到我们确实可以通过输入框输入内容实现对props内数据的修改。但是红彤彤的报错我们还是不瞎的。将报错内容百度翻译一下。
大概的意思就是 props中是我们从父组件中获取的数据对吧。那么vue不想让你直接在子组件中修改这个数据，这样会造成一些逻辑的混乱。而是想让你通过父组件修改这个数据。那么我们可以通过data（）函数来实现
components:{
cpn:{
template:'#cpn',
props:{
number1:Number,
number2:Number
},
data(){
return{
dnumber1:this.number1,
dnumber2:this.number2
}
}
}
}
同时改变标签内容
<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>
3.最后我们想要通过input改变父组件中的data，首先奉上完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
</div>
<template id="cpn">
<div>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<input type="text" v-bind:value="dnumber1" @input="number1input">
<h2>props:{{number2}}</h2>
<h2>data:{{dnumber2}}</h2>
<input type="text" v-bind:value="dnumber2" @input="number2input">
</div>
</template>
<script> var vm = new Vue({
el: '#app',
data: {
num1:1,
num2:0
},
methods:{
num1change(value){
this.num1=value*1;
},
num2change(value){
this.num2=value*1;
}
},
components:{
cpn:{
template:'#cpn',
props:{
number1:Number,
number2:Number
},
data(){
return{
dnumber1:this.number1,
dnumber2:this.number2
}
},
methods:{
number1input(event){
this.dnumber1=event.target.value
this.$emit('num1change',this.dnumber1)
},
number2input(event){
this.dnumber2=event.target.value
this.$emit('num2change',this.dnumber2)
}
}
}
}
}); </script>
</body>
</html>
首先我们在input中绑定事件@input=“number1input”，这个事件的作用是每次触发input事件就通过$emit发送给父组件。父组件接收后将事件中的value值赋给num完成数据的双向传递。
4.问题补充：
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
初学vue很容易一不小心遇到这个错误，这是因为你标签中有多个标签时，需要一个根组件将它们全部包含起来。
本文转自：SDK社区（sdk.cn)是一个中立的社区，这里有多样的前端知识，有丰富的api，有爱学习的人工智能开发者，有风趣幽默的开发者带你学python，还有未来火热的鸿蒙，当各种元素组合在一起，让我们一起脑洞大开共同打造专业、好玩、有价值的开发者社区，帮助开发者实现自我价值！
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！