Vue组件之间通讯,父级向子传参

<template>
  <div id="app">
    <input type="text" v-model="myVal"/>
    <Coma :number='myVal'></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:{
    //调用方法.
    getmyValueWithoutNum(){
      return this.myValue.replace(/\d/g,'');
    }
  }
};
</script>

//

<template>
  <div>
      {{HELLO}}
      {{number}}
      <button @click="emitMyEvent">emit</button>
  </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>