zoukankan      html  css  js  c++  java
  • vue sync

    1、使用vue cli建立工程

    2、在APP.vue中:

    <template>
        <div class="details">
            <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
            <button @click="changeValue">toggle</button>
        </div>
    </template>
    <script>
        import Vue from 'vue'
        Vue.component('myComponent', {
            template: `<div v-if="show">
                        <p>默认初始值是{{show}},所以是显示的</p>
                        <button @click.stop="closeDiv">关闭</button>
                     </div>`,
            props: ['show'],
            methods: {
                closeDiv() {
                    this.$emit('update:show', false); //触发 input 事件,并传入新值
                }
            }
        })
        export default {
            data() {
                return {
                    valueChild: true,
                }
            },
            methods: {
                changeValue() {
                    this.valueChild = !this.valueChild
                }
            }
        }
    </script>

    3、效果:

    4、结论

    sync的作用是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。

  • 相关阅读:
    [NOI2014]动物园
    2018.7.15模拟赛
    2018.7.13模拟赛
    [CodeForces]920F SUM and REPLACE
    [BZOJ3211]花神游历各国
    [GSS5] Can you answer these queries V
    [SPOJ1716] GSS3
    [HNOI2012]排队
    2018.7.10模拟赛
    7.3模拟赛
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9042774.html
Copyright © 2011-2022 走看看