Vue动态组件传递 子往父传递方法

<template>
  <div id="app">
    <input type="text" v-model="myVal"/>
    <Coma :number='myVal' @my-event='getMyEvent'>
      <!-- 向子级插入一个标签 -->
      <p>123123</p>
      <p slot="hader">wwww</p>
      <p slot="ha">hahahaha</p>

    </Coma>
  </div>
</template>

<script>
//如果要使用vue全局.
import Vue from 'vue'
import Coma from './components/a'
export default {
  components:{
    Coma
  },
  data() {
    return {
      myValue:'',
       myVal:'',
    }
  },
  computed:{
    myValueWithoutNum(){
      //数字不能双向绑定 计算属性
      return this.myValue.replace(/\d/g,'');
    }
  },
  //监听val第一次 oldval第二次  //只要数据被更改
  watch:{
    myVal:function(val,oldval){
      console.log(val,oldval);
    }
  },
  methods:{
    getMyEvent(HELLO){
      console.log('i got my event'+HELLO);
    },
    //调用方法.
    getmyValueWithoutNum(){
      return this.myValue.replace(/\d/g,'');
    }
  }
};
</script>

<style>
</style>



<template>
  <div>
      {{HELLO}}
      {{number}}
      <button @click="emitMyEvent">emit</button>
      <!-- 接收父级P标签模板 -->
      <slot name="hader">NO hader</slot>
      <slot name="ha">NO HA</slot>

  </div>
  
</template>

<script>
export default {
  //父级传给子组件 支持数组和对象
  // props:['number'],
  props:{
    'number':[Number,String]
  },
  data() {
    return {
      HELLO: "我是componentA",
    }
  },
  methods:{
    //子像父传递
    emitMyEvent(){
      this.$emit('my-event',this.HELLO );
    }
  }
};
</script>

<style>
</style>