资讯专栏INFORMATION COLUMN

vue入门笔记体系(六)vue组件

niuxiaowei111 / 3114人阅读

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

组件注册

关于组件名:

*组件名可以是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实例中使用
`,
组件中的data必须是函数

当我们定义这个 组件时,你可能会发现它的 data 并不是像这样直接提供一个对象:

data: {
  count: 0
}

取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

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

如果 Vue 没有这条规则,所有模板都会共享一份数据。

解析 DOM 模板时的注意事项

有些 HTML 元素,诸如

      、 和

      这个自定义组件 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 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
      ` })
      插槽的默认内容

      可以在 标签内部指定默认的内容来做到这一点。

      如果父组件为这个插槽提供了内容,则默认的内容会被替换掉。

      作用域插槽
      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}}
      ` })
      动态组件
      
      
      
          
          
          
          Document
      
      
          
      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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96843.html

相关文章

  • vue入门笔记体系vue组件

    摘要:更推荐用和实现父子组件通信创建实例此时打印出组件继承使用基础构造器,创建一个子类。包含组件选项的对象创建构造器创建实例,并挂载到一个元素上。该对象包含可注入其子孙的属性。和绑定并不是可响应的。 组件注册 关于组件名: *组件名可以是kebab-case (短横线分隔命名)或者PascalCase (驼峰式命名) 当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必...

    Neilyo 评论0 收藏0
  • Java学习路线总结,搬砖工逆袭Java架构师(全网最强)

    摘要:哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码,加入群聊,一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话,现在公司的现状是码农太多,但能独立带队的人太少,简而言之,不缺干 ? 哪吒社区Java技能树打卡 【打卡贴 day2...

    Scorpion 评论0 收藏0
  • vue入门笔记体系(一)vue实例

    摘要:就是实例中的对象当前组件接收到的对象。当前组件数的根实例如果当前实例没有父实例,此实例将会是其自己当前实例的直接子组件。 vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时,你可以传入一个选项对象。作为参考,你也可以在 api/#选项-数据 文档 中浏览完整的选...

    microelec 评论0 收藏0
  • vue入门笔记体系(二)vue生命周期

    摘要:此时还未有选项钩子函数和间的生命周期完成后,会有一个判断过程,判断对象是否有选项。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变,会触发对应组件的重新渲染,先后调用和钩子函数。和钩子函数间的生命周期钩子函数在实例销毁之前调用。 vue生命周期 这是vue生命周期的图示具体内容:showImg(https://segmentfault.com/img/bV4xju?w=1200&...

    scola666 评论0 收藏0
  • vue入门笔记体系(五)vue指令

    摘要:指令指令带有前缀,以表示它们是提供的特殊特性。添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖,会扩展成一个更新父组件绑定值的侦听器。 vue指令 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。 v-text {{msg}} v-html //渲染HTML文本,更新元素的 innerHTML 。注意:内...

    myshell 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<