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

最新推荐文章于 2024-04-22 09:07:57 发布

ikunsdc

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量221

点赞数

文章标签： vue.js html

By ikunsdc

本文链接：https://blog.csdn.net/m0_55331605/article/details/114608042

版权

一、需求一

父组件有两个数num1=1,num2=0，传进子组件并在子组件显示，支持

子组件通过输入框修改该值的显示
同步修改父组件的值

二、代码


<!--作者: ikunsdc -->
<!--日期: 2021/03/10 00:36 -->


<!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}}---[父组件传进来num1值]</h2>
    <h2>data:{{dnumber1}}---[子组件当前number1值]</h2>
<!--    单向绑定，只绑定子组件的数据-->
    <input type="text" v-model="dnumber1">   单向绑定，只绑定子组件的数据
    <hr>
    <input type="text" v-bind:value="dnumber1" v-on:input="num1Input"> 双向绑定
    <!--    @input后面太长了 可以写成函数-->
<!--    <input type="text" :value="dnumber1" @input="num1Input">-->
    <h2>props:{{number2}}---[父组件传进来num2值]</h2>
    <h2>data:{{dnumber2}}---[子组件当前number1值]</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(event){
            //1.将input的值，复制到dnumber中
            this.dnumber1 = parseInt(event.target.value);
            //2.为了让父组件可以修改值，发出一个事件。
            this.$emit('num1change',this.dnumber1)
          },
          num2Input(event){
            this.dnumber2 = event.target.value;
            this.$emit('num2change',this.dnumber2)
            //this.$emit('num1change',this.dnumber1)
          }
        }
      }
    }
  })
</script>
</body>
</html>

使用watch属性实现

是一个对象和props，data平级
可以监听props的值变化


<!--作者: ikunsdc -->
<!--日期: 2021/03/10 00:36 -->


<!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}}---[父组件传进来num1值]</h2>
    <h2>data:{{dnumber1}}---[子组件当前number1值]</h2>
<!--    单向绑定，只绑定子组件的数据-->
    <input type="text" v-model="dnumber1">   双向绑定+watch实现
    <hr>
   
    <h2>props:{{number2}}---[父组件传进来num2值]</h2>
    <h2>data:{{dnumber2}}---[子组件当前number1值]</h2>
    <input type="text" v-model="dnumber2">   双向绑定+watch实现
    <hr>
    
<!--    单向绑定，只绑定子组件的数据-->
<!--    <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
          }
        },
        watch:{
          dnumber1(newValue){        // 监听到变化为新值newvalue时，执行下列方法
            this.dnumber1 =newValue;
            this.$emit('num1change',this.dnumber1)
          },
          dnumber2(newValue){
            this.dnumber2 =newValue;
            this.$emit('num2change',this.dnumber2)
            //this.$emit('num1change',this.dnumber1)
          }
        }
      }
    }
  })
</script>
</body>
</html>

三、运行：

单向绑定指定修改子组件data值，双向绑定还可以修改父组件的data值。

ikunsdc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js:父子组件通信-结合双向绑定-watch

一、需求一父组件有两个数num1=1,num2=0，传进子组件并在子组件显示，支持子组件通过输入框修改该值的显示同步修改父组件的值二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title.
复制链接

扫一扫