zoukankan      html  css  js  c++  java
  • Vue 子组件更新props中de属性值

    更多vue实战:https://www.yuque.com/smallwhy/fmgz6r

    在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync自定义v-model

    1、.sync属性

    • 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync
    • 子组件向上弹射事件给父组件时,事件名必须为格式 update:props属性名
    父组件
    <template>
    <div id="app">
        // 注意点一、:show后跟修饰符.sync
        // 等同于<my-componen :show="valueChild" @update:show="val => valueChild= val" />
        <my-component :show.sync='valueChild' />
    </div>
    </template>
    <script>
    export default {
        data(): {
            return {valueChild: false}
        }
    }
    </script>
    
    子组件
    <template>
        <h3>{{show}}</h3>
        <button @click="eventOpt">子组件事件</button>
    </template>
    <script>
    export default {
       props: {
           show: { type: Boolean, default: false}
        } ,
        methods: {
            eventOpt() {
                // 注意二、事件名必须为update:属性名
                // 更改prop中的属性show的属性值,同时更新父组件中中valueChild的属性值
                 this.$emit('update:show', false);
            }
        }
    }
    </script>
    

    2、v-model应用

    • 子组件定义的属性名必须为 value
    • 父组件向上弹射事件给子组件时,事件名必须为 input
    父组件
    <template>
    <div id="app">
       // 等同于<my-componen :value="valueChild" @input="val => valueChild= val" />
        <my-component :value='valueChild' />
    </div>
    </template>
    <script>
    export default {
        data(): {
            return {valueChild: false}
        }
    }
    </script>
    
    子组件
    <template>
        <h3>{{show}}</h3>
        <button @click="eventOpt">子组件事件</button>
    </template>
    <script>
    export default {
       props: {
         // 注意点一、属性名必须为value
          value: { type: Boolean, default: false}
        } ,
        methods: {
            eventOpt() {
                // 注意二、事件名必须为input
                // 更改prop中的属性show的属性值,同时更新父组件中中valueChild的属性值
                 this.$emit('input', false);
            }
        }
    }
    </script>
    

    比较

    _

    • v-model 子组件只能更改props中的一个属性值value;
    • .sync 子组件可以更改props中的多个属性值;
  • 相关阅读:
    使用SQLCOMMAND以及SQLADAPERT 调用存储过程
    将表A的数据复制到表B,以及关于主表和子表的删除办法
    登录次数验证,可能还是有些不足的,希望大家指正
    MVC过滤器
    sql数据库delete删除后怎么恢复,这是网上找的答案。。希望大神验证指教一下
    淘宝前后端分离实践
    P1852 [国家集训队]跳跳棋
    P2154 [SDOI2009]虔诚的墓主人
    P4208 [JSOI2008]最小生成树计数
    P2467 [SDOI2010]地精部落
  • 原文地址:https://www.cnblogs.com/zero-zm/p/12102693.html
Copyright © 2011-2022 走看看