vue父子组件通信练习

在这里插入图片描述

达成效果:

  • 在子组件里触发input时, 父组件里的data会改变
  • 改变父组件data时,子组件里面data和input.value也会改变

在这里插入图片描述

<!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'>
    <h1>父组件中的data:{{num1}}</h1>
    <cpn :son_num1="num1" :son_num2="num2" @num1change="num1change"></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>props里son_num1: {{son_num1}}</h2>
      <h2>子组件data里ds_num1: {{ds_num1}}</h2>
      <input type="text" v-model="ds_num1">
      <!-- <input type="text" v-model="son_num1"> 会报错 -->

      <!-- 下面通过v-bind和@input手动实现v-model,以便在@input触发的事件里添加更多功能 -->
      <input type="text"  v-bind:value="ds_num1" @input="num1input"> 

    </div>
  </template>

  <script>
    const cpn = {
      template: '#cpn',
      //pros只读,它的值更父组件data里数据绑定; 直接v-model="son_num1"会报错;
      props: {
        son_num1: Number,
        son_num2: Number,
      },
      data() {
        //初始化,后续可更改
        return {
          ds_num1: this.son_num1,
          ds_num2: this.son_num2,
        }
      },
      methods: {
        num1input(event) {
          //想在同时触发num1change事件,目的是更改父组件里的data
          this.ds_num1 = event.target.value;
          console.log('点了');
          this.$emit("num1change", this.ds_num1);
        }
      },
    }


    const app = new Vue({
      el: '#app',
      data: {
        num1: 1,
        num2: 2,
      },
      methods: {
        num1change(value) {
          console.log(value);
          this.num1 = parseInt(value);
        },
        num2Change(value) {
          this.num2 = value;
        }
      },
      components: {
        cpn
      },

    });
  </script>

  <style lang='scss' scoped>

  </style>

</body>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值