Vue利用组件传递数据实现一个简单的页面计算器

最新推荐文章于 2024-06-26 09:20:14 发布

落眸

最新推荐文章于 2024-06-26 09:20:14 发布

阅读量777

点赞数

文章标签： vue.js html

本文链接：https://blog.csdn.net/m0_56292352/article/details/127638943

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <com2></com2>
    </div>
    <template id="tmp1">
      <ul>
        <li>
          <p>第一个数：</p>
          <input type="number" v-model="num1" />
        </li>
        <li>
          <p>第二个数：</p>
          <input type="number" v-model="num2" />
        </li>
        <li>
          <button @click="add">加</button>
          <button @click="minus">减</button>
          <button @click="multiply">乘</button>
          <button @click="divide">除</button>
        </li>
      </ul>
    </template>
    <template id="tmp2">
      <div>
        <com1 @child-fn="transContent"></com1>
        <ul>
          <li>结果是：{{result}}</li>
        </ul>
      </div>
    </template>
    <script>
      Vue.component('com1', {
        template: '#tmp1',
        data() {
          return {
            num1: '',
            num2: '',
          }
        },
        methods: {
          add() {
            this.$emit('child-fn', parseInt(this.num1) + parseInt(this.num2))
          },
          minus() {
            this.$emit('child-fn', parseInt(this.num1) - parseInt(this.num2))
          },
          multiply() {
            this.$emit('child-fn', parseInt(this.num1) * parseInt(this.num2))
          },
          divide() {
            this.$emit('child-fn', parseInt(this.num1) / parseInt(this.num2))
          },
        },
      })
      var com2 = {
        template: '#tmp2',
        data() {
          return {
            result: '',
          }
        },
        methods: {
          transContent(data) {
            this.result = data.toString()
          },
        },
      }
      var vm = new Vue({
        el: '#app',
        components: {
          com2,
        },
      })
    </script>
  </body>
</html>

注意全局组件，全局都可以调用，局部组件只能在它注册过的组件使用，故而使用局部组件作为父组件，调用全局子组件。（全局组件调用不了未在其中注册的局部子组件），可以将vm视为最大的组件

代码中定义了两个模板 tmp1,tmp2.tmp1是全局组件的模板，tmp2是局部组件的模板，局部组件com2作为全局组件com1的父组件，子组件将数据运算好传递给父组件。

数据传递：子组件中定义需要运算的数据，方法，当点击按钮时，this,$emit的第一个参数触发负组件中对应的事件（child-fn自定义属性对应的transContent方法），第二个参数传值（传入transContent中，即data),显示输出结果即可。

运行结果如图：