Vue学习笔记（三）——组件传递信息案例

最新推荐文章于 2024-07-23 10:23:14 发布

Coder_小庞

最新推荐文章于 2024-07-23 10:23:14 发布

阅读量118

点赞数 1

分类专栏： Vue 前端组件传递文章标签： vue html vue.js

本文链接：https://blog.csdn.net/qq2297329956/article/details/113417570

版权

Vue 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

组件传递

1 篇文章 0 订阅

订阅专栏

Vue学习笔记（三）——组件传递信息案例

文章目录

Vue学习笔记（三）——组件传递信息案例

一、案例结果显示

这个是一个对父子组件之间信息传递理解，比较好的案例。
主要就三个点：

父传子
子传父
双向绑定

在这里插入图片描述

用到了比较多的Vue的基础知识：父子之间互相传递信息，值绑定等。

二、原理分析

在这里插入图片描述

三、源码

<!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 :cnum1="num1" :cnum2="num2" @numchange1="numchange1" @numchange2="numchange2"></cpn>
  </div>
  <template id="cpn">
    <div>
      <h2>{{cnum1}}</h2>
      <h2>{{dcnum1}}</h2>
      <input type="text" :value="dcnum1" @input="cinput1">
      <h2>{{cnum2}}</h2>
      <h2>{{dcnum2}}</h2>
      <input type="text" :value="dcnum2" @input="cinput2">
    </div>
  </template>
  <script src='../js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num1: 0,
        num2: 1,
      },
      methods: {
        numchange1(value) {
          this.num1 = value * 1;
          /*this.num1 = parseInt(value);*/
        },
        numchange2(value) {
          this.num2 = value * 1;
          /*this.num2 = parseInt(value);*/
        }
      },
      components: {
        cpn:{
          template: '#cpn',
          props: {
            cnum1: Number,
            cnum2: Number,
          },
          data(){
            return {
              dcnum1 : this.cnum1,
              dcnum2: this.cnum2,
            }
          },
          methods: {
            cinput1(event){
              this.dcnum1 = event.target.value;
              this.$emit('numchange1',this.dcnum1);
              this.dcnum2 = this.dcnum1 * 100;
              this.$emit('numchange2',this.dcnum2);
            },
            cinput2(event){
              this.dcnum2 = event.target.value;
              this.$emit('numchange2',this.dcnum2);
              this.dcnum1 = this.dcnum2 / 100;
              this.$emit('numchange2',this.dcnum1);
            }
          }
        }
      }
    })
  </script>
</body>
</html>

Coder_小庞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue学习笔记（三）——组件传递信息案例

Vue学习笔记（三）——组件传递信息案例文章目录Vue学习笔记（三）——组件传递信息案例一、案例结果显示二、原理分析三、源码一、案例结果显示这个是一个对父子组件之间信息传递理解，比较好的案例用到了比较多的Vue的基础知识：父子之间互相传递信息，值绑定等。二、原理分析三、源码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi
复制链接

扫一扫