<template>
	<div class="keyboth">
    <h1>Just Enter Text:</h1>
    <textarea type="text" v-model="keyboardText" @on-result-change="onResultChange"></textarea>
    <key-board :keyboard-text.sync="keyboardText"></key-board>
  </div>
</template>
<script>
import KeyBoard from '../components/Keyboard.vue'
export default {
  data() {
    return{
      keyboardText: ""
    }
  },
  components: {
    KeyBoard
  },
  methods: {
    change() {
      // this.result = !this.result;
    },
    onResultChange(val){
      this.keyboardText=val;
      // console.log(val)//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    }
  }
}
</script>
<style  scoped>
  .keyboth{
    width: 680px;
    margin: 20px auto;
    font-family: Verdana, Sans-Serif; 
    h1 {
      color: #42b983;
      font-weight: bold;
    }
    textarea {
      display: block;
      width: 100%;
      min-height: 100px;
      padding: 0;
      margin: 20px 0;
      font-size: 16px;
    }
  }
</style>