zoukankan      html  css  js  c++  java
  • 父组件向子组件传递事件或者调用其事件

    父组件:

    import aboutUs from '../common/aboutUs.vue'
      export default{
      data () {
       return {
         who: 'aboutUs', // 切换弹框
         bindSuccess: false // 关于我们状态
       }
      },
       components: {
         aboutUs
        },
      methods: {
      /* 是否显示关于我们 */
       showAboutUs () {
         this.$refs.aboutUs.OpenPop() // 方法一
        this.$refs.child.$emit('childMethod') // 方法二
       },
      }
      }
    <component v-bind:is="who" ref="aboutUs" :unBinding="bindSuccess"></component>
     <div @click="showAboutUs"/>关于我们</div>

    子组件:

    export default {
      data () {
        return {
          isHadBind: false,
          bind: ''
        }
      },
      created () {
        this.bind = this.unBinding
      },
      props: {
        unBinding: {
          type: Boolean,
          required: true,
          default: false
        }
      },
    mounted () {
      /* 方法二 */
    this.$nextTick(() => {
        this.$on('childMethod', () => {
         console.log('监听成功')
       })
    })
    },
    methods: { OpenPop () {
    this.bind = true } } }
    <div v-model="bind">
        <div class="aboutUs">
           子组件
        </div>
      </div>
  • 相关阅读:
    nginx接收tcp请求转发server
    eclipse 配置github 提交代码
    eclipse安装JDK11
    java内存管理
    进程 线程 纤程 中断
    DCL单例为什么要加volatile
    如何清理history
    后置引用
    nc 工具使用
    ip_local_port_range 和 ip_local_reserved_ports
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/8183129.html
Copyright © 2011-2022 走看看