vue入门笔记体系（六）vue组件

摘要：更推荐用和实现父子组件通信创建实例此时打印出组件继承使用基础构造器，创建一个子类。包含组件选项的对象创建构造器创建实例，并挂载到一个元素上。该对象包含可注入其子孙的属性。和绑定并不是可响应的。

关于组件名：

*组件名可以是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