Vue的学习笔记-组件化开发（奇怪的需求）

最新推荐文章于 2022-08-27 14:37:05 发布

ζั͡ ั͡離 ั͡ั͡傷 ั͡

最新推荐文章于 2022-08-27 14:37:05 发布

阅读量147

点赞数

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

本文链接：https://blog.csdn.net/qq_44832068/article/details/107405661

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue的学习笔记-组件化开发（奇怪的需求）

任务需求

父子组件之间数据进行绑定，子组件数据一旦发生改变，父组件数据也随之改变，反之亦然

解决方法

首先创建Vue对象在其属性“components”添加子组件对象

<cpn :num1="number1" :num2="number2" />//HTML标签

<template id="cpns">//子组件模板
    <div>
        <h2>{{num1}}</h2>
        <input type="text" >
        <h2>{{num2}}</h2>
        <input type="text" >
    </div>
</template>

components: {//注册并创建子组件对象
            cpn: {
                template: '#cpns',
                //父组件传进来的数据
                props: {
                    num1: Number,
                    num2: Number
                }
            }
        }

然后我贴出完整代码，结合注释使用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<body>
<div id="app">
    <!-- :num1,:num2  对子组件props的值与父组件的数据进行绑定    @num1change：子组件使用$emit() 自定义的事件
                                                              num2change  对子组件传出来的事件进行处理的方法-->
    <cpn :num1="number1" :num2="number2" @num1change="num1change" @num2change="num2change"></cpn>
</div>

<template id="cpns">
    <div>
        <h2>props：{{num1}}</h2>
        <h2>data：{{dnum1}}</h2>
        <!--  :value   用子控件data函数的数据绑定value值  @input   创建num1Input方法进行监听输入类容   -->
        <input type="number" :value="dnum1" @input="num1Input">
        <br><br>
        <h2>props：{{num2}}</h2>
        <h2>data：{{dnum2}}</h2>
        <input type="number" :value="dnum2" @input="num2Input">
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            number1: 1500,
            number2: 0
        },
        methods: { //接收子组件传过来的value 进行绑定Vue的数据
            num1change(value) {
                this.number1 = parseInt(value);//转为整型
            },
            num2change(value) {
                this.number2 = parseFloat(value);//转为浮动类型
            }
        },
        components: {
            cpn: {
                template: '#cpns',//创建组件模板
                props: { //对父组件传过来的数据进行约束
                    num1: Number,
                    num2: Number
                },
                data() {//创建data函数，返回需要的数据
                    return{
                        dnum1: this.num1,
                        dnum2: this.num2
                    }
                },
                methods: {
                    num1Input(event){//接收浏览器发出的事件对象
                        this.dnum1 = event.target.value; //获取事件对象的属性值
                        this.$emit('num1change',this.dnum1); //创建向父组件通信事件，事件名为“num1change”
                        this.dnum2 = this.dnum1*2;//dnum1发生改变时要求dnum2*2
                    },
                    num2Input(event){
                        this.dnum2 = event.target.value;
                        this.$emit('num2change',this.dnum2);//创建向父组件通信事件，事件名为“num2change”
                        this.dnum1 = this.dnum2/2;//dnum2发生改变时要求dnum1等于dnum2的2分之一
                    }
                }
            }
        }
    });
</script>
</body>
</html>