Vue组件--动态传值

• 父组件-->子组件：通过属性props传值

子组件中定义属性

export default {
    props: {
        'my-value': [Number, String]
    }
}

父组件中绑定此属性（子组件<ComA></ComA>）,JS中使用 - 区分大写字母

<com-a :my-value="myVal" @my-event='getMyEvent'></com-a>
data () {
  return  {
  myVal: ''
  }
}

• 子组件-->父组件: $emit

子组件：

this.$emit('my-event', this.hello)

父组件：

<com-a :my-value="myVal" @my-event='getMyEvent'></com-a>

• slot 插槽

在父组件中动态向子组件中添加内容or标签

子组件：ComA

<template>
    <div>
        <slot name='header'>no header</slot>
        <p>zhongjainzhi</p>
        <slot name='footer'>no footer</slot>
    </div>
</template>

父组件：

 <com-a :my-value="myVal" @my-event='getMyEvent'>
      <p slot='header'>header</p>
      <p slot='footer'>footer</p>
 </com-a>