欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js父子组件通信--结合双向绑定

程序员文章站 2022-06-18 18:02:11
父子组件通信-结合双向绑定一丶案例代码二丶运行结果——古来圣贤皆寂寞,惟有饮者留其名——一丶案例代码

一丶案例代码

<!--作者:key-->
<!--浏览工具:Chrome-->
<!--开发工具:WebStorm-->
<!--开发时间:2020/11/28 17:06-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change" >
  </cpn>
</div>

<template id="cpn">
  <div>
<!--    使用data中的计算属性进程改动数据,双向绑定-->
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
<!--    单向绑定,只绑定子组件的数据-->
    <input type="text" v-model="dnumber1">   单向绑定,只绑定子组件的数据
    <hr>
    <input type="text" v-bind:value="dnumber1" v-on:input="dnumber1=$event.target.value"> 双向绑定
    <!--    @input后面太长了 可以写成函数-->
<!--    <input type="text" :value="dnumber1" @input="num1Input">-->
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2">   单向绑定,只绑定子组件的数据
    <hr>
    <input type="text" :value="dnumber2" @input="num2Input">双向绑定
<!--    单向绑定,只绑定子组件的数据-->
<!--    <input type="text" v-model="dnumber2">-->
<!--    直接绑定,Vue不支持-->
<!--    <h2>{{number1}}</h2>-->
<!--    <input type="text" v-model="number1">-->
<!--    直接绑定,Vue不支持-->
<!--    <h2>{{number2}}</h2>-->
<!--    <input type="text" v-model="number2">-->
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      num1:1,
      num2:0
    },
    methods: {
      num1change(value){
        this.num1 = parseFloat(value)
      },
      num2change(value){
        this.num2 = parseFloat(value)
      }
    },
    components:{
      cpn :{
        template:'#cpn',
        props:{
          //如果只是想直接展示的话,就可以直接用
          //如果要改数据的话,最好是放在data中用计算属性更改
          number1:Number,
          number2:Number
        },
        data(){
          return{
            dnumber1:this.number1,
            dnumber2:this.number2
          }
        },
        methods:{
          num1Input(){
            this.dnumber1 = event.target.value;
            this.$emit('num1change',this.dnumber1)
          },
          num2Input(){
            this.dnumber2 = event.target.value;
            this.$emit('num2change',this.dnumber2)
          }
        }
      }
    }
  })
</script>
</body>
</html>

二丶运行结果

Vue.js父子组件通信--结合双向绑定

——古来圣贤皆寂寞,惟有饮者留其名——

本文地址:https://blog.csdn.net/weixin_43402353/article/details/110291038