Vue.js父子组件通信（props，emit）

最新推荐文章于 2024-05-04 22:57:35 发布

minus_yao

最新推荐文章于 2024-05-04 22:57:35 发布

阅读量263

点赞数

文章标签： vue 组件化开发组件通信

本文链接：https://blog.csdn.net/money_yao/article/details/103388274

版权

需求：父组件的num属性的值传递给子组件，子组件中输入框中修改数字，父组件相应发生变化，同时两个输入框的数字有100倍的定量关系；

实现：通过vue.js中父子组件通信的知识，父->子传递通过props完成，子->父传递通过$emit完成；难点在于子组件输入框中value发生改变时，父组件的num需要同时发生改变，这时不能直接修改子组件中接受的props中的属性（vue官方要求不能修改props,容易发生父组件数据改变的重写）

解决方法：将输入框中的value的修改放到子组件的data函数中，通过:value绑定子组件的value，同时input属性@input可以监听输入框的变化，发生变化时，将input中的value赋值给双向绑定的子组件属性；为让父组件修改值，需要通过$emit发出自定事件，并传递参数给父组件。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信-父子数据传递</title>
</head>
<body>
<div id="app">
    <cpn :number1="num1" :number2="num2"
         @num1change="num1Response" @num2change="num2Response"></cpn>
</div>

<template id="cpn">
    <div>
        <h2>props:{{number1}}</h2>
        <h2>data:{{dnumber1}}</h2>
<!--        <input type="text" v-model="dnumber1">-->
<!--        vue官方避免直接修改props传递的属性，容易被父组件重写；因此写到子组件的data函数中 -->
<!--        为实现子组件输入框值改变，父组件也发生改变，需要绑定@input的值并监听，若改变则向父组件发出自定义事件-->
        <input type="text" :value="dnumber1" @input="num1Input">
        <h2>props:{{number2}}</h2>
        <h2>data:{{dnumber2}}</h2>
<!--        <input type="text" v-model="dnumber2">-->
        <input type="text" :value="dnumber2" @input="num2Input">
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    //定义父组件
    const app = new Vue({
        el:"#app",
        data:{
            num1:1,
            num2:0
        },
        methods:{
            num1Response(value){
                this.num1=parseFloat(value);
            },
            num2Response(value){
                this.num2=parseFloat(value);
            }
        },
        //定义子组件，子组件包含number1和number2属性
        components:{
            cpn:{
                template:'#cpn',
                props:{
                    number1:Number,
                    number2:Number
                },
                data(){
                    return {
                        dnumber1:this.number1,
                        dnumber2:this.number2
                    }
                },
                methods:{
                    num1Input(event){
                        //1.将input中的value赋值到dnumber中
                        this.dnumber1=event.target.value;
                        //2.为让父组件修改值，$emit向父组件发出自定义事件
                        this.$emit("num1change",this.dnumber1);
                        //3.同时修改dnumber2的值
                        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>

minus_yao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js父子组件通信（props，emit）

需求：父组件的num属性的值传递给子组件，子组件中输入框中修改数字，父组件相应发生变化，同时两个输入框的数字有100倍的定量关系；实现：通过vue.js中父子组件通信的知识，父->子传递通过props完成，子->父传递通过$emit完成；难点在于子组件输入框中value发生改变时，父组件的num需要同时发生改变，这时不能直接修改子组件中接受的props中的属性（vue官方要求不能...
复制链接

扫一扫