使用Vue.component创建组件及注意事项

作者: 莫伊剑客 | 来源:发表于2020-11-12 14:08 被阅读0次

使用Vue.component创建组件及注意事项
vue.component、vue.extend、vue
VUE03--{组件、生命周期}
vue组件
Vue/组件
Vue组件创建和传值
vue 组件和路由
Vue.js学习笔记（4）
vue语法基础二-组件
超全面的vue.js使用总结

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件化</title>
</head>

<body>
  <div id="app">
    <div>
      <add-couse v-model='couse' @input='onInput' @add-couse='addCouse' ></add-couse>
      <couses-list :couses='list'></couses-list>
    </div>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    // add-couse
    Vue.component('add-couse', {
      props: ['value'],
      template: `
      <div>
        <input type='text' :value='value' @input='onInput' @keyup.enter='addCouse'/>
        <button @click='addCouse'>add</button>  
      </div>
      `,
      methods: {
        addCouse() {
          this.$emit('add-couse')
        },
        onInput(e) {
          this.$emit('input', e.target.value)
        }
      }
    })
    // couse-list
    Vue.component('couses-list', {
      props: {
        couses: {
          type: Array,
          default: []
        }
      },
      created() {
        console.log(this.couses)
      },
      template: `<div>
        <p v-for='(em,index) in couses' :key='index'>{{em}}</p>
      </div>`
    })
    const app = new Vue({
      el: '#app',
      data() {
        return {
          couse: '000',
          list: ['1', '2',6]
        }
      },
      watch: {
        couses(newValue, oldValue) {
          console.log(newValue)
        }
      },
      methods: {
        onInput(val) {
          this.couse = val
        },
        addCouse() {
          this.list.push(this.couse)
          this.couse = ''
        }
      },
      updated () {
        console.log(this.list)
      },
    })
    // console.log(app, app.title)
    // console.log(app.$options.render)
  </script>
</body>

</html>