Vue元件基礎定義

import Vue from 'vue'

const compoent = {
  props: {
    active: {
      // type: Boolean,
      // required: true,
      validator (value) {
        return typeof value === 'boolean'
      }
    },
    propOne: String
  },
  template: `
    <div>
      <input type="text" v-model="text">
      <span @click="handleChange">{{propOne}}</span>
      <span v-show="active">see me if active</span>
    </div>
  `,
  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: `
    <div>
      <p>{{prop1}}</p>
      <!--建議傳遞參用下劃線命名，接收引數用駝峰-->
      <!--若傳參是非string，需用:-->
      <
 
[email protected]="handleChange"接收子元件派發的change事件，這裡不能@change-y="handleChange"這麼寫-->
      <comp-one ref="comp1" :active="true" :prop-one="prop1" @changeY="handleChange"></comp-one>
      <comp-one :active="true" propOne="text2"></comp-one>
    </div>
  `
})

Vue元件繼承 

import Vue from 'vue'

const compoent = {
  props: {
    active: Boolean,
    propOne: String
  },
  template: `
    <div>
      <input type="text" v-model="text">
      <p @click="handleChange">propOne引數：{{propOne}}</p>
      <p v-show="active">see me if active</p>
    </div>
  `,
  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: `
    <div>
      <span>{{text}}</span>
      <comp propOne="propOne" @change="change"></comp>
    </div>
  `
})
 

元件繼承的執行順序 

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: `
    <div>
      <!--:value為props的值-->
      <input type="text" @input="handleInput" :value="value22">
    </div>
  `,
  methods: {
    handleInput (e) {
      // change為model中的event
      this.$emit('change', e.target.value)
    }
  }
  // 若不使用model接收父元件傳參
  // props: ['value'], // 必須要使用value
  // template: `
  //   <div>
  //     <!--:value為props的值-->
  //     <input type="text" @input="handleInput" :value="value">
  //   </div>
  // `,
  // methods: {
  //   handleInput (e) {
  //     // 這兒必須用input傳送資料，傳送的資料會被父級v-model接收
  //     this.$emit('input', e.target.value)
  //   }
  // }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data () {
    return {
      value11: '123'
    }
  },
  template: `
    <div>
      <!--將父元件資料通過v-model傳遞給子元件-->
      <comp-one v-model="value11"></comp-one>
    </div>
  `
})

Vue元件高階屬性 

import Vue from 'vue'

const ChildComponent = {
  template: '<div>child component: {{data.value}}</div>',
  inject: ['yeye', 'data'], // 跨級元件溝通
  mounted () {
    // console.log(this.yeye, this.value)
  }
}

const component = {
  name: 'comp',
  components: {
    ChildComponent
  },
  // template: `
  //   <div :style="style">
  //     <div class="header">
  //       <slot name="header"></slot>
  //     </div>
  //     <div class="body">
  //       <slot name="body"></slot>
  //     </div>
  //   </div>
  // `,
  template: `
    <div :style="style">
      <slot :value="value" aaa="111"></slot>
      <child-component></child-component>
    </div>
  `,
  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: `
    <div>
      <comp-one ref="comp">
        <div slot-scope="props" ref="span">
          <P>子元件元件內部變數：{{props.value}} {{props.aaa}}</P>
          <P>當前元件變數：{{value}}</P>
        </div>
      </comp-one>
      <input type="text" v-model="value" />
    </div>
  `
})
// 匿名插槽
// 具名插槽
// 作用域插槽，父元件可使用子元件中的資料slot-scope

與君共勉：再牛逼的夢想，也抵不住傻逼般的堅持！