zoukankan      html  css  js  c++  java
  • vue 父组件v-model传值,子组件props['value']接收;子组件$emit('input',XX),去改变父组件中的值

    vue 再父子组件传值时,除了传统的父组件 :属性去传值外,还可以使用   父组件v-model传值,子组件props['value']接收,而子组件也可以通过$emit('input',false),去改变父组件中v-model 和 子组件中 value 的值 。

    <!--父组件-->
     
    <template>
       <test v-model = "isShow"></test>
       <button @click="isShow = !isShow">switch</button>
    </template>
    <script>
       import test from '../test';
       export default {
          components: {
             test
          },
          data() {
             return {
               isShow: false
             }
          }
       }
    </script>
    <!--子组件-->
     
    <template>
      <div>
       <div>{{value}}</div>
       <Button @click="$emit('input',false)">关闭</Button>
      </div>
    </template>
    <script type="text/ecmascript-6">
        export default {
            props:['value'],
            mounted() {
                console.log(this.value)
            }
        }
    </script>
  • 相关阅读:
    rabbitmq消息路由
    rabbitmq消息消费
    python中的正则匹配
    Spectral Grouping Using Nystrom Method
    基于WKPCA的多路谱聚类算法
    基于加权KPCA的谱聚类算法
    单词拆分
    完全平方数
    零钱兑换
    组合总数
  • 原文地址:https://www.cnblogs.com/pwindy/p/12891806.html
Copyright © 2011-2022 走看看