23vue学习_父组件和子组件双向绑定的经典例子

最新推荐文章于 2023-12-26 12:24:45 发布

chencaw

最新推荐文章于 2023-12-26 12:24:45 发布

阅读量100

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113734982

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

父组件和子组件双向绑定，子组件的中修改

1、采用v-bind,@input的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <!-- 注意，这里父组件监听子组件的消息 -->
        <cpn :number1="num1" :number2="num2"
            @cnum1change="pnum1change"
            @cnum2change="pnum2change"/>
    </div>
    <!-- 子组件模板 -->
    <template id="cpn1">
        <div>
           <h2>props:{{number1}}</h2>
           <h2>data:{{dnumber1}}</h2>
           <!-- <input type = "text" v-model="dnumber1"> -->
           <input type = "text" :value="dnumber1" @input=num1Input>
           <h2>props:{{number2}}</h2>
           <h2>data:{{dnumber2}}</h2>
           <input type = "text" :value="dnumber2" @input=num2Input>
        </div>            
    </template>

    <script src="../js/vue.js"></script>
    <script>
        //1.子组件
        const cpn ={
            template: '#cpn1',
            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.为了让父组件可以修改至，发出一个事件
                    this.$emit('cnum1change',this.dnumber1);
                    //3.同时修改dbumber2的值
                    this.dnumber2 = this.dnumber1*100;
                    this.$emit('cnum2change',this.dnumber2)
                },
                num2Input(event){
                    //1.将input中的value赋值到dnumber中
                    this.dnumber2 = event.target.value;
                    //2.为了让父组件可以修改至，发出一个事件
                    this.$emit('cnum1change',this.dnumber2);
                    //3.同时修改dbumber2的值
                    this.dnumber1 = this.dnumber2/100;
                    this.$emit('cnum1change',this.dnumber1)
                }
            }      
        };
        //2父组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                num1: 1,
                num2: 0
            },
            components:{
                cpn
            },
            methods:{
                pnum1change(value){
                    this.num1 = parseFloat(value);
                },
                pnum2change(value){
                    this.num2 = parseFloat(value);
                }
            }     
        })
    </script>
</body>

2、采用v-model，watch的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <!-- 注意，这里父组件监听子组件的消息 -->
        <cpn :number1="num1" :number2="num2"
            @cnum1change="pnum1change"
            @cnum2change="pnum2change"/>
    </div>
    <!-- 子组件模板 -->
    <template id="cpn1">
        <div>
           <h2>props:{{number1}}</h2>
           <h2>data:{{dnumber1}}</h2>
           <input type = "text" v-model="dnumber1">
           <!-- <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>
        //1.子组件
        const cpn ={
            template: '#cpn1',
            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.为了让父组件可以修改至，发出一个事件
            //         this.$emit('cnum1change',this.dnumber1);
            //         //3.同时修改dbumber2的值
            //         this.dnumber2 = this.dnumber1*100;
            //         this.$emit('cnum2change',this.dnumber2)
            //     },
            //     num2Input(event){
            //         //1.将input中的value赋值到dnumber中
            //         this.dnumber2 = event.target.value;
            //         //2.为了让父组件可以修改至，发出一个事件
            //         this.$emit('cnum1change',this.dnumber2);
            //         //3.同时修改dbumber2的值
            //         this.dnumber1 = this.dnumber2/100;
            //         this.$emit('cnum1change',this.dnumber1)
            //     }
            // }
            watch: {
                dnumber1(newValue) {
                    this.dnumber2 = newValue * 100;
                    this.$emit('cnum1change',newValue);
                },
                dnumber2(newValue) {
                    this.dnumber1 = newValue / 100;
                    this.$emit('cnum2change',newValue);
                }
            }      
        };
        //2父组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                num1: 1,
                num2: 0
            },
            components:{
                cpn
            },
            methods:{
                pnum1change(value){
                    this.num1 = parseFloat(value);
                },
                pnum2change(value){
                    this.num2 = parseFloat(value);
                }
            }     
        })
    </script>
</body>

chencaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
23vue学习_父组件和子组件双向绑定的经典例子

父组件和子组件双向绑定，子组件的中修改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body>  <div id ="app"> <!-- 注
复制链接

扫一扫

专栏目录