Vue 小知识-组件化的学习

然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数

组件的顺序问题: 是在调用时的顺序 即引用下标, 不是注册的顺序

如果没有 Vue.component 创建组件 children 组件 可以用[0]

即: Vue.component 创建的组件 game1 下标为[0]

Vue.component 创建的组件 game1 下标为[1]

Vue 实例对象里面的组件 children 的下标为[2]

Vue 组件化

组件化 写一个小游戏组件

• 创建一个组件,my-game: 猜数字大小
• 组件: 一个 input 和一个 p 构成
• 当组件准备挂载的时候,初始化一个随机数,
• 在 input 取输入的时候,
• 如果输入的数字小了, 在 p 显示: 输入的太小了;
• 如果输入的数字大了, 在 p 显示: 输入的太大了;
• 否则就提示输入正确

<script lang="javascript">
  console.log('Vue Version ', Vue.version)

  // 组件的创建
  Vue.component('game1', {
    data() {
      return {
        randomNum: 0,
        myInput: '第一个组件',
        result: '',
      }
    },
    template: `
                <div>
                  <input type='text' v-model.number='myInput'/>
                  <br>
                  <p>{{ result }}</p>
                </div>
        `,
    beforeMount: function () {
      // 创建一个10以内的随机数
      var num = Math.floor(Math.random() * 10)
      console.log('生产的随机数 ', num)
      this.randomNum = num
      console.log(this.myInput)
    },
    // 当输入的数据改变时执行的操作 判断 并给出提示
    watch: {
      myInput() {
        if (this.myInput === this.randomNum) {
          this.result = '恭喜: 猜对了'
        } else if (this.myInput > this.randomNum) {
          this.result = '啊哦! 猜大了'
        } else {
          this.result = '啊哦! 猜小了'
        }
      },
    },
  })
</script>