首页 > 其他分享> > 父子组件，双向绑定，跨域实现数据互通

父子组件，双向绑定，跨域实现数据互通

2021-06-03 18:34:14 作者：互联网

父子组件实现数据互通

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
  <cpn :cnum1="num1" :cnum2="num2" @haha="hehe"></cpn>
</div>
<script src="../vue.js"></script>
<template id="cpn">
  <div>
    <h2>{{dnum1}}</h2>
<!--    <input type="text" v-model="dnum1">-->
<!--    第二种方式，使用原始的绑定原理-->
    <input type="text" :value="dnum1" @input="inputnum1">
  </div>
</template>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      num1: 1,
      num2: 2
    },
    methods: {
      hehe(value){
        console.log(value)
      }
    },
    components: {
      cpn:{
        template: '#cpn',
        props: {
          cnum1:{
            type: Number
          },
          cnum2: {
            type: Number
          }
        },
        data(){
          return {
            dnum1: this.cnum1,
            dnum2: this.cnum2
          }
        },
        methods: {
          inputnum1(event) {
            this.dnum1 = event.target.value;
            this.$emit('haha',this.dnum1)
          }
        }
      }
    }
  })
</script>
</body>
</html>

因为跨父子组件了，双向绑定不能通过v-model改props，只能手动处理了。

学会使用htis.$emit() 向父组件传递数据。

标签：跨域,dnum1,app,绑定,value,互通,组件,message,methods
来源： https://www.cnblogs.com/ch2020/p/14846418.html