Vue基础之米和千米的相互转换 watch监听方法

最新推荐文章于 2022-09-02 22:36:00 发布

前端进阶在线笔记

最新推荐文章于 2022-09-02 22:36:00 发布

阅读量1.1k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/abcsimple/article/details/121157057

版权

<!DOCTYPE html>
<HTML>
    <head>
        <meta charset="utf">
        <title>米和千米的互换watch监听</title>
    </head>
    <body>
        <!-- 父组件模板 -->
        <div id="app">
           <cpn :numberkm="num1km" :numberm="num2m"
           @num1change = "number1change($event)"
           @num2change = "number2change($event)"
           
           ></cpn>
        </div>
        <!-- 子组件模板 -->
        <template id="cpn">
            <div>
                <!-- <p>千米prop：{{numberkm}}</p> -->
                <!-- <p>千米data：{{dnumberkm}}</p> -->
                <p>千米：<input type="text" v-model="dnumberkm">km</p>
                <!-- <p>米prop：{{numberm}}</p> -->
                <!-- <p>米data：{{dnumberm}}</p> -->
                <p>米：<input type="text" v-model="dnumberm">m</p>
            </div>
        </template>
        <script src="../vue.js"></script>
        <script>
            //父组件
            var app = new Vue({
               el:'#app',
               data:{
                   num1km: 1,
                   num2m: 1000, 
                   
               },
               methods:{
                   number1change(val){
                       this.num2 = parseFloat(val);
                   },
                   number2change(val){
                       this.num1 = parseFloat(val);
                   } 
               },
               //子组件
               components:{
                   cpn:{
                        template:'#cpn',
                        data(){
                            return{
                                dnumberkm: this.numberkm,
                                dnumberm: this.numberm,
                            }
                        },
                        props:{
                            numberkm: {
                                
                                default:1,
                            },
                            numberm: {
                                
                                default:1000,
                            }
                        },
                        watch:{
                            dnumberkm(newValue){
                                this.dnumberm = newValue * 1000;
                                this.$emit('num1change', newValue);    
                            },
                            dnumberm(newValue){
                                this.dnumberkm = newValue /1000;
                                this.$emit('num2change', newValue);    
                            },
                        },
                    },
                        
                },
            })
        </script>
    </body>
</HTML>

使用watch 监听从父组件prop接收的、在子组件上被双向绑定的 data 。

将 watch 监听的（已改变的新的）数据通过自定义事件$emit（发射）给父组件。

父组件 @ 到自定义事件的发生，执行相应函数，从而改变父组件中的初始data。

父组件的初始 data 通过 prop 将值传给子组件。

表现为：子组件的千米发生变化，watch 到变化后（input输入新的值）的千米，将千米X1000后，发射给父组件，父组件监听该发射，接收千米X1000后的数据，并将该数据赋值给父组件的原始的存放米的data，由于父组件的米发生了改变，prop 使子组件的米也发生了改变。——子组件的千米发生改变，最后子组件的米也发生了改变。