Vue之组件通信基础之千米和米的互相转换

最新推荐文章于 2024-07-16 16:43:05 发布

前端进阶在线笔记

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量623

点赞数

文章标签： javascript 开发语言 ecmascript

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

版权

这是比较原理的笨方法，使用watch监听更好，该案例是为了弄懂基础。

<!DOCTYPE html>
<HTML>
    <head>
        <meta charset="utf">
        <title>父子组件通信基础</title>
    </head>
    <body>
        <!-- 父组件模板 -->
        <div id="app">
           <cpn :numberkm="num1" :numberm="num2"
           @num1change = "number1change($event)"
           @num2change = "number2change($event)"
           
           ></cpn>
        </div>
        <!-- 子组件模板 -->
        <template id="cpn">
            <div>
                <p>千米prop：{{numberkm}}</p>
                <p>千米data：{{dnumberkm}}</p>
                <input type="text" :value="dnumberkm" @input="numberkmInput">
                <p>米prop：{{numberm}}</p>
                <p>米data：{{dnumberm}}</p>
                <input type="text" :value="dnumberm" @input="numbermInput">
            </div>
        </template>
        <script src="../vue.js"></script>
        <script>
            //父组件
            var app = new Vue({
               el:'#app',
               data:{
                   num1: 1,
                   num2: 1000, 
                   
               },
               methods:{
                   number1change(valkm,valm){
                       this.num1 = parseFloat(valkm);
                       this.num2 = parseFloat(valm);//已经是number类型的如何处理才不是NaN
                   },
                   number2change(valm,valkm){
                       this.num1 = parseFloat(valkm);//已经是number类型的如何处理才不是NaN
                       this.num2 = parseFloat(valm);
                   } 
               },
               components:{
                   cpn:{
                        template:'#cpn',
                        data(){
                            return{
                                dnumberkm: this.numberkm,
                                dnumberm: this.numberm,
                            }
                        },
                        props:{
                            numberkm: {
                                
                                default:1,
                            },
                            numberm: {
                                
                                default:1000,
                            }
                        },
                        methods:{
                            numberkmInput(event){
                                this.dnumberkm = event.target.value;
                                //this.dnumberkm = parseFloat(this.dnumberkm);
                                this.dnumberm =this.dnumberkm*1000;
                                this.$emit('num1change',this.dnumberkm,this.dnumberm);
                                //this.$emit('num1change',this.dnumberkm);
                                
                            },
                            numbermInput(event){
                                this.dnumberm = event.target.value;
                                //this.dnumberm = parseFloat(this.dnumberm);
                                this.dnumberkm =this.dnumberm/1000;
                                this.$emit('num2change',this.dnumberm,this.dnumberkm)
                                //this.$emit('num2change',this.dnumberm)
                                
                            },
                        },
                    },
                        
                },
            })
        </script>
    </body>
</HTML>

类型的细节：input输入后类型为string类行，在子组件中不好转换，只能在父组件转换。如何处理得更好？有没有更好的解决方法？

前端进阶在线笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之组件通信基础之千米和米的互相转换

这是比较原理的笨方法，使用watch监听更好，该案例是为了弄懂基础。<!DOCTYPE html><HTML> <head> <meta charset="utf"> <title>父子组件通信基础</title> </head> <body>  <div id="app"
复制链接

扫一扫