Vue3 数据双向绑定与动态传值响应

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3 数据双向绑定与动态传值响应相关的知识,希望对你有一定的参考价值。

参考技术A Vue2的v-model与.sync是语法糖,props: ['value'], $emit('input', newVal);

Vue3对v-model进行了调整,取消了.sync

1. v-model="count" 双向绑定

2. v-model:countA="count" 双向绑定

3. :countB="count" 单向传值

4. :countC="count"    @update:countC="count = $event" 显示双向绑定

5. :countD="count"   dynamicName="countD" 动态传值响应,特殊情形下使用。做组态开发时可能会用到。

Vue中父子组件的双向数据绑定

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录


前言

父组件向子组件传值:使用 props 属性

子组件向父组件传值:使用自定义事件。


提示:以下是本篇文章正文内容,下面案例可供参考

一、父子组件单向传值

1.父组件向子组件传值

父组件:

<template>
  <child :nameP="name"></child> 
</template>
<script>
  export default 
    components: 
      child
    ,
    data () 
      return 
        name: '父组件'
      
    
  
</script>

子组件:

<template id="child"> 
 <div> 
   nameP  
 </div> 
</template>
<script>
  export default 
    // 接受父组件的值
    props: 
     nameP:String 
    
  
</script>

props 用于接收父组件传过来的值,props 的写法有很多种,具体如:

//1.直接接收数据 
props: [ 'numP' ] 
 
//2.加类型限制 
props: [ 
 numP: Number 
 ]  
 
//3.添加默认值 
props: [ 
 numP:  
  type:Number, 
  default:0 
   
]  
 
//4.是否必须值限制 
props: [ 
 numP:  
  type:Number, 
  default:0, 
  require:true //添加必须值,不传此值会报错 
  
]  
 
//5.采用对象形式 
props:  
 numP:  
  type:Number, 
  default:0, 
  
 

2.子组件向父组件传值

子组件:

<template>
  <div>
    子组件:
    <span>childValue</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>
<script>
  export default 
    data () 
      return 
        childValue: '我是子组件的数据'
      
    ,
    methods: 
      childClick () 
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childValue)
      
    
  
</script>

父组件:

<template>
  <div>
    父组件:
    <span>name</span>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from './child'
  export default 
    components: 
      child
    ,
    data () 
      return 
        name: ''
      
    ,
    methods: 
      childByValue: function (childValue) 
        // childValue就是子组件传过来的值
        this.name = childValue
      
    
  
</script>

二、父子组件数据双向绑定

1.v2.2.0+ 新增model通过model属性实现

父组件

<template>
    <div>
        <child v-model='value'></child>
        // 等价于
        <child :value='value' @childValueChange = "val=> value = val "></child>
         父子组件同步的数据:<span>value</span>
    <div/>
</template>
<script>
data() 
      return 
        value: '父组件的数据'
      
    
</script>

子组件

//子组件child
<template>
    <input type="text" v-model="childValue" @input="childInputChange"/>
</template>
<script>
    export default 
        name: "child",
        model:   // 定义model
        	// 父组件v-model绑定的值传递给props中的fatherValue
            prop: 'fatherValue',  
            // 通过emit触发childValueChange将内部值传递给父组件v-model绑定的值
            event: 'childValueChange'  
        ,
        props: 
            fatherValue: String    // 接受父组件传递的值
        ,
        data()
            return 
                childValue: this.fatherValue// 关联值
            
        ,
        methods: 
            childInputChange() 
                // 通过$emit触发childValueChange(model内定义)事件,将内部值传递给给父组件
                this.$emit('childValueChange', this.childValue)
            
        
    
</script>

2.sync修饰符(v2.3.0+ 新增)

父组件

<template>
    <div>
        我是父子组件之间同步的数据data
        <child :data.sync='data'></child>
    </div>
</template>

<script>
    data()
      return 
        data:'我是来自父组件的数据'
      
    
</script>

子组件

<template>
  <div>
    <input type="text" v-model="childData" @input="childDataChange">
  </div>
</template>
<script>
    props:
      data:
        default:'',
        type:String
      
    ,
    data()
      return 
        childData:this.data //关联父组件的值
      
    ,
    watch:
      data()
        this.childData = this.data
      
    ,
    methods:
      childDataChange()
        this.$emit('update:data', this.childData) // 触发update:data将子组件值传递给父组件
      
    
</script>

其实就是

  <child :data='data' v-on:update:data="data = $event"></child>
  被简化成了
  <child :data.sync='data'></child>

而其他代码不变。所以我们在使用.sync修饰符的时候,只需要注意v-bind:xx,v-on:update:xx,v-bind:xx.sync的差异就行了,但是注册事件的时候一定要用this.$emit( ‘update:xx’ )

以上是关于Vue3 数据双向绑定与动态传值响应的主要内容,如果未能解决你的问题,请参考以下文章

vue3.0(双向绑定)源码分析

Vue响应式原理/双向数据绑定

vue3自定义组件使用v-model实现双向数据绑定

elementplus二次封装一个input

Vue3的双向绑定是如何实现的

Vue3.0 双向绑定原理