精华内容
下载资源
问答
  • vue中sync修饰符

    千次阅读 2019-06-17 17:12:05
    从2.3.0起,Vue重新引入了 .sync修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 示例一: 父组件: <parent :items.sync="data1"></parent> ...

    从2.3.0起,Vue重新引入了 .sync修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

    示例一:
    父组件:

    <parent :items.sync="data1"></parent>
    等同
    <parent :items="data1" @update:items="val => data1 = val"></parent>
    

    子组件:

     watch: {
          items(val) {
            this.tableData = val
          },
          tableData(val) {
            this.$emit('update:items', val)
          }
        },
        computed: {
        },
        data() {
          return {
            tableData: []
          }
       }
    

    示例二:
    父组件:

     <div class="reg-form__field">
          <v-input
            placeholder="请输入手机号码"
            type="tel"
            maxlength="11"
            v-model="form.phone"
            :checkPhone="true"
            :required="true"
            novalidate="novalidate"
            pattern="[0-9]*"
            :valid.sync="form.valid_phone"
          />
        </div>
    
    data() {
          return {
            form: {
              valid_phone: false // 是否有字段不正确
            }
          };
        }
    

    子组件:
    触发事件,传递更新的值

     this.$emit('update:valid', false);
    

    如下:

    会被扩展为:

    <com :foo=“bar” @update:foo=“val => bar = val”>

    当子组件需要更新foo的值时,它需要显示地触发一个更新事件:

    this.$emit(“update:foo”, newValue)

    Vue修饰符sync的功能是:当一个子组件改变了一个prop值时,这个变化也会同步到父组件中所绑定。如果我们不用 .sync,我们也可以用props传初始值,然后事件监听。

    展开全文
  • 关于vue中sync修饰符的用法

    千次阅读 2019-02-21 15:32:38
    .sync是在vue2.3.1+版本开始使用,在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。 ...

    .sync是在vue2.3.1+版本开始使用,在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

    在这里用update: myPropName的模式触发事件取而代之,方法如下:子组件触发

    this.$emit('update:title', newTitle)
    

    这样父组件可以监听那个事件并根据需要更新一个本地的数据属性

    <text-document v-bind:title.sync="title"></text-document>
    

    注意:
    将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: title }”,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。

    展开全文
  • Vue中sync修饰符的用法

    2020-09-02 23:11:00
    场景:在父组件的data定义一个变量,希望在子组件改变这个变量,并传递给父组件 父组件: <template> <div> <select-dialog v-if="showChoiceDialog" :show.sync="showChoiceDialog" :...

    场景:在父组件的data中定义一个变量,希望在子组件中改变这个变量,并传递给父组件

    父组件:

    <template>
        <div>
            <select-dialog
                v-if="showDialog"
                :show.sync="showDialog"
                :select.sync="selectResult"
            ></select-dialog>
        </div>
    </template>
    
    <script>
    import SelectDialog from './SelectDialog';
    export default {
        data() {
            return {
                showDialog: false,
                selectResult: null
            };
        },
        components: {
            SelectDialog
        }
    };
    </script>
    

    子组件:

    <template>
        <el-dialog
            :visible.sync="dialogTableVisible"
            title="请选择"
            :before-close="beforeClose"
        >
            <el-input v-model.trim.lazy="input" placeholder="输入ID"></el-input>
            <div>
                <div>
                    <el-table :data="tableData">
                        <el-table-column label="ID">
                            <template v-slot="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button type="text" @click="handleSelectionChange(scope.row)" >选择</el-button>
                          </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div v-if="false" slot="footer">
                <el-button type="primary" @click="comfirm">确 定</el-button>
                <el-button @click="$emit('update:show', false)">取 消</el-button>
            </div>
        </el-dialog>
    </template>
    
    <script>
    export default {
        data() {
            return {
                dialogTableVisible: true,
                tableData: [],
                input: '',
                currentSelection: null
            };
        },
        methods: {
            beforeClose(done) {
                this.$emit('update:show', false);
                done();
            },
            comfirm() {
                if (this.currentSelection) {
                    this.$emit('update:show', false);
                    this.$emit('update:select', this.currentSelection);
                } else {
                    this.$message({
                        message: '请选中一个ID',
                        type: 'warning'
                    });
                }
            },
            handleSelectionChange(val) {
                this.currentSelection = val;
                this.comfirm();
            }
    };
    </script>
    
    展开全文
  • Vue中sync修饰符的使用

    2020-11-06 00:16:53
    -- 因为vue是单向数据流,父组件给子组件传值后,是不能直接修改props 接收属性值的,如果要修改,需要子组件向父组件发送一个事件,在父组件 监听,去修改传入的name值, --> 一: 1.父组件 <div :title=...
    <!-- 因为vue是单向数据流,父组件给子组件传值后,是不能直接修改props
    接收属性值的,如果要修改,需要子组件向父组件发送一个事件,在父组件中
    监听,去修改传入的name值, -->
    一: 1.父组件
    <div :title="name" @click="edit"></div>
    
    export default{
    	data() {
    		name: ''
    	},
    	methods: {
    		edit(e) {
    			this.name = e;
    		}
    	}
    }
    
    2.子组件
    this.$emit('edit', '修改的值')
    
    二: 使用sync修饰符后,减少代码量
    // 父组件中
    <div :title.sync="name"></div>
    // 子组件中
    export default{
    	methods:{
    		this.$emit("update:show", "修改的值")
    		// 一定要注意,不能写成"update:  show", 不可以有空格,我是踩坑小达人
    	}
    }
    
    展开全文
  • 我们可能需要对一个 prop 进行“双向绑定”...父组件: <parent :age="age" @setAge="res => age = res"></parent> data () { return { age: 10 } }, 子组件: <div> {{age}} <
  • 主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue .sync修饰符

    2021-05-10 13:34:59
    接手别人项目,发现vue加了点东西,查了下,实际项目比较使用 父组件页面 // myForm 子组件 <my-form :visible.sync="dialogShowForm" >...vue .sync 修饰符 当一个子组件改变了一个 prop
  • vue .sync修饰符的用法

    千次阅读 2018-09-28 11:24:02
    那么同时,vue中也提供了一种解决方案.sync修饰符。在此之前,希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。如果你对此还不了解父子组件如何通过$emit实现双向通信,那就点我先了解下吧...
  • 深入理解vue 修饰符sync【 vue sync修饰符示例】 _littleTank_关注 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 移除了 .sync ...
  • vuesync修饰符

    2019-06-04 13:39:00
    用element-ui的Dialog组件的时候,发现它的显示隐藏有用到.sync修饰符,组件是这样写的:visible.sync="dialogVisible",在自己写弹窗组件的时候,遇到父点击显示子组件的时候碰到,第二次不能显示的问题,就想到...
  • Vue2 sync 修饰符

    2021-06-28 16:32:24
    sync 修饰符 sync就是一个语法糖,其实还是使用了父子组件传值和方法 <v-children :zjq.sync="zjq"></v-children> //等同于 <v-children v-bind:zjq="zjq" v-on:update:zjq="e =>zjq=e"><...
  • vue .sync 修饰符

    2021-07-19 19:57:48
    .sync 修饰符作用: 让子组件可以更加优雅的修改父组件的data 单向数据流 所有的prop都是其父子prop之间形成一个单向下行绑定,:父级prop的更新会向下流到子组件,但是反过来是不可以的(不可以在子组件修改父组件...
  • vuesync修饰符详解

    2019-08-01 10:40:15
    官方推荐使用一种update:my-prop-name 的模式来替代...在vue 1.x的.sync修饰符所提供的功能为 【当一个子组件改变了一个带.sync的prop的值时,这个变化也会同步到父组件所绑定的值】 这会导致的问题是它破坏...
  • vue .sync修饰符学习

    2021-06-11 13:39:44
    vue中的.sync修饰符用法及原理详解 vue中我们经常会用v-bind(缩写为:)给子组件传入参数。 或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态。 例如: //父组件给子组件传入一个函数 &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,592
精华内容 1,036
关键字:

vue中sync修饰符

vue 订阅