vue.js中的修饰符 .sync 的作用

红太狼 2023-06-09 07:54 48阅读 0赞

vue.js 中 .sync 修饰符的作用 相当于向子组件中传递一个函数；

先看父组件代码：

<template>
    <div style="background:red;margin-top:20px;"> 
        <input type="text" v-model="val">
        <child3   :action.sync="val"></child3>
    </div>
    </template>
    <script>
    import child3 from './child3'
    export default {
    data () {
    return {
        val:''
    }
    },
    components:{
      'child3':child3
    },
    methods:{ 
    } }
    </script>

子组件代码：

<template>
    <div style="background:skyblue;">
        <input type="text" v-model="msg">
        <button @click="active">点我执行父组件方法</button>
    </div>
    </template>
    <script>
    export default {
    data () {
    return {
        msg:''
    }
    },
    props:['msg'],
    methods:{
        active(){
            this.$emit("update:action",this.msg)
        }
    } }
    </script>

说明：在子组件中点击按钮的时候，执行active 方法，并执行  this.$emit("update:action",this.msg) ； 其中 uupdate:  是固定的部分；action 是自己定义的，父组件中引入子组件的时绑定的属性和该自定义的部分相同； this.msg 是向父组件传递的值；

val 的值就是传递过来的 值 this.msg； 输入框中的值就发生变化了；但是我在实践的时候发现，数值传到父组件之后，子组件的数值就变为空了；

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue之.sync修饰符

根据VUE官方文档所述，.sync修饰符用来prop双向绑定，而.sync修饰符类似v-model，只是一个语法糖 ![在这里插入图片描述][watermark_type_

怼烎@/ 2023年06月09日 13:27/ 0 赞/ 103 阅读

相关 vue.js中的修饰符 .sync 的作用

vue.js 中 .sync 修饰符的作用相当于向子组件中传递一个函数；先看父组件代码： <template> <div style="backgrou

红太狼/ 2023年06月09日 07:54/ 0 赞/ 49 阅读

相关 modal组件的.sync修饰符

之前工作中在自定义组件时有用到`modal`组件，官方文档里都会在`modal`里写 <fui-modal :visible.sync="visible"

た入场券/ 2023年02月11日 03:11/ 0 赞/ 90 阅读

相关 .sync修饰符

第一步：先用一句话解释 .sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。第二步：具体解释一般情况下，想要实现父子组件间

我不是女神ヾ/ 2022年11月22日 05:10/ 0 赞/ 232 阅读

相关 vue 中.sync修饰符的使用方法

最近在项目中看到有些地方用了.sync修饰符，所以进一步了解一下，并记录。 vue官网.sync修饰符介绍：[点击查看][Link 1] 一般情况下，子组件向父组件传值

Bertha 。/ 2022年11月15日 15:55/ 0 赞/ 248 阅读

相关 sync修饰符的用法

首先我们需要知道子组件如何向父组件传值。 //子页面 opTitle.vue var data = 10; //第一个参数对应父页面自定义的事件,第

比眉伴天荒/ 2022年11月03日 10:56/ 0 赞/ 232 阅读

相关 java中static修饰符的作用

static表示“全局”或者“静态”的意思，用来修饰成员变量和成员方法，也可以形成静态static代码块，但是Java语言中没有全局变量的概念。被static修饰的成员变量

川长思鸟来/ 2022年05月30日 07:54/ 0 赞/ 307 阅读

相关深入理解vue 修饰符sync【 vue sync修饰符示例】

在说vue 修饰符sync前，我们先看下官方文档：[vue .sync 修饰符][vue .sync]，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在

Bertha 。/ 2022年03月30日 18:07/ 0 赞/ 536 阅读

相关 vue的sync修饰符详解

官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定做项目时，我们经常会用到 prop （父子

雨点打透心脏的1/2处/ 2021年11月13日 23:01/ 0 赞/ 399 阅读

相关 vue .sync修饰符的实例

.sync的作用是：让子组件优雅的修改父组件的data 实例：弹窗的开关父组件传递一个布尔值show决定子组件弹窗的开关 <product-list @add

ゝ一世哀愁。/ 2021年09月18日 00:12/ 0 赞/ 422 阅读