//父组件
<template>
<div>
<my-button
:name="this.btnName"
:myStyle="myButtonStyle"
@child-say="whatChildSay"></my-button>
<p>子组件传递过来的值了吗?
<span>{{childWords}}</span>
</p>
<div id="myCharts"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
  return {
    msg:'',
    btnName:'现在是父组件给子组件传递的值',
    myButtonStyle:{
      border:'1px solid red'
    },

  },
methods: {
  whatChildSay(data1) {
    this.childWords = data1
  },
},
}
</script>
<style scoped>
body {
  font-family: Menlo, Consolas, monospace;
  color: #444;
}
span{
color:red
}
#myCharts{
  width: 300px;
  height:300px
}
</style>

//子组件
<template>
  <div id="myButton" >
   <button :style="myStyle" @click="clickMe()"> {{name}}</button>
  </div>
</template>
<script >
  export default {
    name: 'myButton',
    components: {},
    props:{
      name:String,
      myStyle:Object
    },
    data() {
      return {
        name1:'现在是子组件传回的值啦'
      }
    },
    filters: {},
    methods: {
      clickMe(){

        this.$emit('child-say',this.name1);
      }
    },
    mounted() {
    }
  }
</script>
<style scoped lang="scss">
button{
  background-color: darkseagreen;
  border-radius: 20%;
}
</style>