关于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)
    }
}