组件通信-父子组件通信案例

最新推荐文章于 2023-09-08 16:43:28 发布

Eli-sun

最新推荐文章于 2023-09-08 16:43:28 发布

阅读量190

点赞数

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106841768

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

组件通信-父子组件通信案例

这个案例中有一个问题，就是value未定义我也不知道怎么解决

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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="dnumber1">-->
  <input type="text" v-bind:value="dnumber1" @input="num1input">
  <h2>props:{{number2}}</h2>
  <h2>data:{{dnumber2}}</h2>
  <!--<input type="text" v-model="dnumber2">-->
  <input type="text" v-bind:value="dnumber2" @input="num2input">

</div>
</template>
<script src="../../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
      num1:1,
      num2:0,
    },
    methods:{
      num1change(){
        this.num1=parseFloat(value)
      },
      num2change(){
        this.num2=parseFloat(value)
      }

    },
    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.为了让父组件可以修改值，发出一个事件
            this.$emit('num1change',this.number1)

            //3.同时修改dnumber2的值
            this.dnumber2=this.dnumber1*100;
            this.$emit('num2change',this.dnumber2)

          },
          num2input(event){
            this.dnumber2=event.target.value
            this.$emit('num2change',this.number2)

            //3.同时修改dnumber1的值
            this.dnumber1=this.dnumber2/100;
            this.$emit('num1change',this.dnumber1)

          }
        }
      }
    },

  })
</script>
</body>
</html>

Eli-sun

关注

0
点赞
踩
0

收藏

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

组件通信-父子组件通信案例这个案例中有一个问题，就是value未定义我也不知道怎么解决<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, mi
复制链接

扫一扫