父组件和子组件之间的传值

最新推荐文章于 2021-08-26 08:49:24 发布

Qsb_sxyc

最新推荐文章于 2021-08-26 08:49:24 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/Qsb_sxyc/article/details/105299216

版权

进入前端不久，主要是记录自己在开发学习过程中的一些小问题，以及不注意的小细节（人生路漫漫，需要学习的东西还很多）

父子组件之间传值

父组件给子组件传值通过：props（以下为代码）

html部分
js部分

子组件给父组件传值通过自定义事件：$emit

html部分
js部分

对于其中的一些东西来说，让我说出来可能描述不清楚，多看文档，多写几个案例就都会了，下面是我写出来的一个案例

<body>
  <div id="app">
    <!-- 在组件中绑定props的数据 -->
    <cpn :number1="num1" :number2="num2" @newnum1="parentnum1" @newnum2="parentnum2"></cpn>
  </div>



  <template id="cpn">
    <div>
      <h2>{{number1}}</h2>
      <input type="text" :value="inumber1" @input="changeInput1">
      <h2>{{number2}}</h2>
      <input type="text" :value="inumber2" @input="changeInput2">
    </div>
  </template>


  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        num1: 1,
        num2: 2
      },
      methods: {
        parentnum1(value) {
          this.num1 = parseFloat(value)
        },
        parentnum2(value) {
          this.num2 = parseFloat(value)
        }
      },
      //注册一个局部组件
      components: {
        cpn: {
          template: '#cpn',
          props: {
            number1: Number,
            number2: Number
          },
          data() {
            return {
              inumber1: this.number1,
              inumber2: this.number2
            }
          },
          methods: {
            changeInput1(event) {
              this.inumber1 = event.target.value
              //将子组件的新的值传递给父组件
              this.$emit('newnum1', this.inumber1)
              this.inumber2 = this.inumber1 * 100
              //将num2的新数值再次抛出给父组件
              this.$emit('newnum2',this.inumber2)
            },
            changeInput2(event) {
              this.inumber2 = event.target.value
              this.$emit('newnum2', this.inumber2)
              this.inumber1 = this.inumber2 / 100
              //将num2的新数值再次抛出给父组件
              this.$emit('newnum1',this.inumber1)
            }
          }
        }
      }
    })
  </script>
</body>