父子组件通信结合双向绑定

最新推荐文章于 2023-07-04 12:01:18 发布

FGGIT

最新推荐文章于 2023-07-04 12:01:18 发布

阅读量88

点赞数

分类专栏： vue学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_47888212/article/details/128737591

版权

vue学习笔记专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <!-- v-on单向绑定number1跟着num1变，num1不跟着number1变，v-model双向绑定 -->
    <div id="app">
        <cpn :number1="num1" :number2="num2" @num1change="num1change1" @num2change="num2change1"></cpn>
    </div>

    <template id="cpn">
        <div>
                <h1>A-{{number1}}</h1>
                <h1>B-{{pnumber1}}</h1>
                <!-- <input type="text" v-model="number1"> -->
                <!-- <input type="text" v-model="pnumber1"> -->
                <input type="text" :value="pnumber1" @input="changenum1">
                <h1>A-{{number2}}</h1>
                <h1>B-{{pnumber2}}</h1>
                <!-- <input type="text" v-model="number2"> -->
                <input type="text" :value="pnumber2" @input="changenum2">
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                num1: 1,
                num2: 2
            },
            methods: {
                num1change1(item){
                    //转化成数字类型
                    // this.num1 = item*1;
                    this.num1 = parseFloat(item);
                },
                num2change1(item){
                    //转化成数字类型
                    // this.num2 = item*1;
                    this.num2 = parseFloat(item);

                }
            },
            components: {
                cpn: {
                    template: '#cpn',
                    props: {
                        number1: Number,
                        number2: Number
                    },
                    data(){
                        return{
                            pnumber1: this.number1,
                            pnumber2: this.number2
                        }
                    },
                    methods: {
                        changenum1(event){
                            this.pnumber1 = event.target.value;
                            this.$emit('num1change', this.pnumber1);
                            this.pnumber2 = this.pnumber1*100;
                            this.$emit('num2change', this.pnumber2);
                        },
                        changenum2(event){
                            this.pnumber2 = event.target.value;
                            this.$emit('num2change', this.pnumber2);
                            this.pnumber1 = this.pnumber2*0.01;
                            this.$emit('num1change', this.pnumber1);

                        }
                    },   
            }
            }
        })
    </script>
</body>
</html>