深入解析Vue父子组件通信 -双向数据绑定问题

最新推荐文章于 2023-04-20 10:09:39 发布

健身三年的前端小白

最新推荐文章于 2023-04-20 10:09:39 发布

阅读量396

点赞数 3

分类专栏： vue 前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_43440751/article/details/115001976

版权

父子组件通信小结以及双向数据绑定问题

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>