摘要：更推薦用和實現父子組件通信創建實例此時打印出組件繼承使用基礎構造器，創建一個子類。包含組件選項的對象創建構造器創建實例，并掛載到一個元素上。該對象包含可注入其子孫的屬性。和綁定并不是可響應的。

關于組件名：

*組件名可以是kebab-case (短橫線分隔命名)或者PascalCase (駝峰式命名)
當使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case
當使用 PascalCase (駝峰式命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。*

//在注冊之后可以用在任何新創建的 Vue 根實例 (new Vue) 的模板中
Vue.component("my-component-name", {
  // ... 選項 ...
})

const component = {
    template: `
    

      
    
  `,
    data() {
        return {
            text: 123
        }
    },
    methods:{

    }

}
const app = new Vue({
    //el:"#root",
    components: {
        comp: component
    },
    template: "",

}).$mount("#root")

注意：組件的模板只能有一個根元素。下面的情況是不允許的。

template: `
這是一個局部的自定義組件，只能在當前Vue實例中使用
            hello`,

當我們定義這個 組件時，你可能會發現它的 data 并不是像這樣直接提供一個對象：

data: {
  count: 0
}

取而代之的是，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 沒有這條規則，所有模板都會共享一份數據。

有些 HTML 元素，諸如

、
、 和 ，對于哪些元素可以出現在其內部是有嚴格限制的。而有些元素，諸如
1. 、
和 ，只能出現在其它某些特定的元素內部。

這會導致我們使用這些有約束條件的元素時遇到一些問題。例如：

這個自定義組件 會被作為無效的內容提升到外部，并導致最終渲染結果出錯。幸好這個特殊的 is 特性給了我們一個變通的辦法：

需要注意的是如果我們從以下來源使用模板的話，這條限制是不存在的：

字符串 (例如：template: "...")
單文件組件 (.vue)
插槽 插槽內容

const component = {
  template: `
    

       //vue的默認組件，放置插槽的地方
    
  `,
  data () {
    return {
      style: {
        width: "200px",
        height: "200px",
        border: "1px solid #aaa"
      },
      value: "component value"
    }
  }
}
new Vue({
  components: {
    CompOne: component
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {

  },
  template: `
    

      
        this is contne //傳遞插槽內容
      
    
  `
})

具名插槽

有些時候我們需要多個插槽，可以進行命名；

import Vue from "vue"

const component = {
  template: `
    

      

         //進行插槽命名
      
      

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

new Vue({
  components: {
    CompOne: component
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {

  },
  template: `
    

      
        this is header ///向指定的內容
        this is body
      
    
  `
})

插槽的默認內容

可以在 標簽內部指定默認的內容來做到這一點。

  Submit

如果父組件為這個插槽提供了內容，則默認的內容會被替換掉。

作用域插槽

import Vue from "vue"

const component = {
  template: `
    

       //向外傳遞的數據
    
  `,
  data () {
    return {
      style: {
        width: "200px",
        height: "200px",
        border: "1px solid #aaa"
      },
      value: "component value"
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {
    console.log(this.$refs.comp.value, this.$refs.span) //打印出組件實例和HTML標簽
  },
  template: `
    

      
        {{value}} //此時沒有作用域，訪問到的不是組件內的value,而是外部的value
        //添加作用域，組件內部傳遞的數據都保存在props對象中
        {{props.value}}
      
    
  `
})

動態組件

    
    
    
    


    

        
        
        change
    

    
    

provide / inject 跨級組件通信

這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。

import Vue from "vue"

const ChildComponent = {
  template: "
child component:
",
  inject: ["yeye","value"], 
  mounted () {
    console.log(this.$parent.$options.name) //上一級
    console.log(this.yeye,this.value) //上上一級,接受到的數據，打印出上上一級的vue實例和123
  }
}

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

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

new Vue({
  components: {
    CompOne: component
  },
  provide () { //和data一樣，可以調用相應的值,是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。
    return {
      yeye: this,
      value:this.value
    }
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {
    console.log(this.$refs.comp.value2, this.$refs.span)
  },
  template: `
    

      
        {{props.value}}
      
    
  `
})

provide 和 inject 綁定并不是可響應的。這是刻意為之的。provide 和 inject 綁定并不是可響應的。這是刻意為之的。

import Vue from "vue"

const ChildComponent = {
  template: "
child component:{{data.value}}
",
  inject: ["yeye","data"],
  mounted () {
    console.log(this.$parent.$options.name) //上一級
    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",
      value2: "component222 value"
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  provide () { //和data一樣，可以調用相應的值
    const data = {}

    // es5雙向綁定實現原理
    Object.defineProperty(data, "value", {
      get: () => this.value, //獲取最新value，每次調用value相當于get()方法
      enumerable: true //可讀取
    })

    return {
      yeye: this,
    //   value:this.value
      data
    }
  },
  el: "#root",
  data () {
    return {
      value: "123"
    }
  },
  mounted () {
    console.log(this.$refs.comp.value2, this.$refs.span)
  },
  template: `
    

      
        {{props.value}}
      
      
    
  `
})

provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。

渲染函數 & JSX

參考：渲染函數&JSX