局部组件使用指令-方法-过滤器-计算属性

Posted 2021-02-12 mushitianya

    <div id="app">
      <index>

      </index>
    </div>
    <script>
      // 1.1 假设创建一个product局部组件
      let product = {
        template: `
        <div>
          {{msg}} {{company}}
          <button @click="change">改变</button>
          <input type="text" v-focus/>
          <div>{{ctime | fmtTime}}</div>
          <div>{{ctime | fmtMonth}}</div>
        </div>
        `,
        // data 必须是一个函数了，并且要返回一个全新的对象
        data() {
          return {
            msg: 'hello world',
            ctime: new Date()
          }
        },
        methods: {
          change() {
            this.msg = 'hello 黑马'
          }
        },
        computed: {
          company() {
            return '传智播客'
          }
        },
        // 局部自定义指令通过directives创建, 这个指令只能在当前这个组件中使用，脱离了就使用不了
        directives: {
          focus: {
            // 指令的定义
            inserted: function (el) {
              el.focus()
            }
          }
        },
        // 局部过滤器通过filters创建，这个过滤器只能在当前这个组件中使用，脱离了就使用不了
        filters: {
          fmtTime(time) {
            let y = time.getFullYear()
            return y
          },
          fmtMonth(time) {
            let y = time.getMonth() + 1
            return y
          }
        }
      }

      Vue.component('index', {
        // 1.3 在index组件的模板中使用product组件
        template: '<div>这是首页:<product></product></div>',
        // 1.2 如果想要使用下面的product，得在index组件中注入一下，通过components属性注入
        components: {
          product
        }
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
   </script>