Vue基础精讲 —— Vue的组件之组件的定义、继承、自定义双向绑定、高级属性

Vue组件基础定义

import Vue from 'vue'

const compoent = {
  props: {
    active: {
      // type: Boolean,
      // required: true,
      validator (value) {
        return typeof value === 'boolean'
      }
    },
    propOne: String
  },
  template: `
    

      
      {{propOne}}
      see me if active
    
  `,
  data () {
    return {
      text: 0
    }
  },
  methods: {
    handleChange () {
      this.$emit('changeY')
    }
  }
}

// Vue.component('CompOne', compoent)

new Vue({
  components: {
    CompOne: compoent
  },
  data: {
    prop1: 'test'
  },
  methods: {
    handleChange () {
      this.prop1 = this.prop1 + ' test'
    }
  },
  mounted () {
    console.log(this.$refs.comp1)
  },
  el: '#root',
  template: `
    

      
{{prop1}}
      
      
      
      
      
    
  `
})

Vue组件继承 

import Vue from 'vue'

const compoent = {
  props: {
    active: Boolean,
    propOne: String
  },
  template: `
    

      
      
propOne参数：{{propOne}}
      
see me if active
    
  `,
  data () {
    return {
      text: 0
    }
  },
  mounted () {
    console.log('compoent1 comp mounted')
  },
  methods: {
    handleChange () {
      this.$emit('change')
    }
  }
}

const componet2 = {
  extends: compoent, // 继承compoent
  data () {
    return {
      text: 1
    }
  },
  mounted () {
    console.log('componet2', this.$parent.$options.name)
  }
}

// const CompVue = Vue.extend(compoent)

// new CompVue({
//   el: '#root',
//   propsData: {
//     propOne: 'xxx'
//   },
//   data: {
//     text: '123'
//   },
//   mounted () {
//     console.log('instance mounted')
//   }
// })

const parent = new Vue({
  name: 'parent'
})

new Vue({
  parent: parent, // 设置父组件
  name: 'Root',
  el: '#root',
  mounted () {
    console.log('Root', this.$parent.$options.name)
  },
  components: {
    Comp: componet2
  },
  data: {
    text: '组件1'
  },
  methods: {
    change () {
      console.log('kkkkk')
    }
  },
  template: `
    

      {{text}}
      
    
  `
})

组件继承的执行顺序 

Vue自定义组件双向绑定

import Vue from 'vue'

const component = {
  // 使用model
  model: {
    // prop，子组件接收父组件通过v-model传递过来的值，可重命名为value22
    prop: 'value22',
    // event，该组件在派发emit 'change' 事件的时候，传递参数的值就是父组件v-model能够收到的值。
    event: 'change'
  },
  props: ['value22'], // model中得到的prop值
  template: `
    

      
      
    
  `,
  methods: {
    handleInput (e) {
      // change为model中的event
      this.$emit('change', e.target.value)
    }
  }
  // 若不使用model接收父组件传参
  // props: ['value'], // 必须要使用value
  // template: `
  //   

  //     
  //     
  //   
  // `,
  // methods: {
  //   handleInput (e) {
  //     // 这儿必须用input发送数据，发送的数据会被父级v-model接收
  //     this.$emit('input', e.target.value)
  //   }
  // }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data () {
    return {
      value11: '123'
    }
  },
  template: `
    

      
      
    
  `
})

Vue组件高级属性 

import Vue from 'vue'

const ChildComponent = {
  template: '
child component: {{data.value}}
',
  inject: ['yeye', 'data'], // 跨级组件沟通
  mounted () {
    // console.log(this.yeye, this.value)
  }
}

const component = {
  name: 'comp',
  components: {
    ChildComponent
  },
  // template: `
  //   

  //     

  //       
  //     
  //     

  //       
  //     
  //   
  // `,
  template: `
    

      
      
    
  `,
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      },
      value: 'component value'
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  provide () {
    const data = {}

    Object.defineProperty(data, 'value', {
      get: () => this.value,
      enumerable: true
    })

    return {
      yeye: this,
      data
    }
  },
  el: '#root',
  data () {
    return {
      value: '123'
    }
  },
  mounted () {
    console.log(this.$refs.comp.value, this.$refs.span)
    // 打印vue实例，dom节点，ref用在组件和原生HTML上的区别
  },
  template: `
    

      
        

          
子组件组件内部变量：{{props.value}} {{props.aaa}}
          
当前组件变量：{{value}}
        
      
      
    
  `
})
// 匿名插槽
// 具名插槽
// 作用域插槽，父组件可使用子组件中的数据slot-scope

 

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！