关于vue的那些小事

1. 在子组件中触发父组件中的方法

父组件:

<arrowtitle @myevent='myevent'>
</arrowtitle>
import arrowtitle from './arrowtitle'
methods: {
    myevent () {
        console.log('myevent')
    }
}

子组件arrowtitle:

<template>
    <div @click='linkEvent'>测试</div>
</template>
methods: {
    linkEvent () {
        this.$emit('myevent')
    }
}

2. 动态在父组件中添加子组件

父组件中:

<template>
    <div>
      <p @click='handleClick'>显示子组件:</p>
      <component :is="vuename"></component>
    </div>
</template>
<script>
const Foo = resolve => require(['./applyManage.vue'], resolve)
    export default{
        data () {
            return {
                vuename: ''
            }
        },
        methods:{
            handleClick () {
              this.vuename = Foo
            }
        }
    }
</script>
当点击p标签时,子组件才会渲染进去

3. 在父组件中触发子组件中的方法

<div click='parentClick'>
    <child ref='profile'></child>
</div>
在父组件中:
methods: {
    parentClick () {
    this.$refs.profile.childClick('2017-08')
    }
}
在子组件中:
methods: {
    childClick (date) {
        console.log(date)
    }
}
发布了7 篇原创文章 · 获赞 9 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览