Vue——父子组件通信案例

最新推荐文章于 2024-01-10 11:21:10 发布

33的史努比

最新推荐文章于 2024-01-10 11:21:10 发布

阅读量426

点赞数

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

本文链接：https://blog.csdn.net/coising/article/details/123179776

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

父子组件通信案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
</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-model="number1"> -->
            <input type="text" :value="dnumber1" @input="num1Input">
            <h2>props:{{number2}}</h2>
            <h2>data:{{dnumber2}}</h2>
            <!-- <input type="text" v-model="number2"> -->
            <input type="text" :value="dnumber2" @input="num2Input">
        </div>
    </template>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                num1 : 1,
                num2 : 0
            },
            methods:{
                num1change(value){
                    this.num1 = parseFloat(value) 
                },
                num2change(value) {
                    this.num2 = parseFloat(value)
                }
            },
            components: {
                cpn : {
                    template : '#cpn',
                    props: {
                        number1 : Number,
                        number2 : Number
                    },
                    data(){
                        return {
                            dnumber1 : this.number1,
                            dnumber2 : this.number2,
                        }
                    },
                    methods : {
                        num1Input(event) {
                            // 将input中value赋值到dnumber中
                            this.dnumber1 = event.target.value;
                            // 为了让父组件修改值，发出一个事件
                            this.$emit('num1change',this.dnumber1);

                            // 3. 同时修改dnumber的值
                            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>

在这里插入图片描述

33的史努比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——父子组件通信案例

父子组件通信案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> --&
复制链接

扫一扫