vue组件

组件

  1. 组件继承自实例 实例有的组件也有，会有一些变异
  2. 组件的目的是为了实现复用
  3. 组件正常情况下无法直接使用实例的数据 只能使用自己的数据
  4. 在哪创建的组件就在哪使用.

  • 组件的创建

    let xixi=Vue.extend({template:"<h1>这里是组件</h1>"})

  • 注册一个组件

    • vue.component('组件的名字',创建组件的名字)

      Vue.component('Hehe',xixi)

  • 使用组件

    • 把组件名可以当标签名来使用,组件明不能和内置标签名一样

      div id='app'> 
  <Hehe></Hehe>
  <Hehe></Hehe>
  <Hehe></Hehe>
</div>

  • 局部组件 全局组件 的区分就是注册位置不同

全局组件

  • 通过 Vue.componment 注册的组件叫全局组件

  • 全局组件在所有的实例里都可以用

  • 全局组件的注册要求卸载实例的前方

let  component = Vue.extend({template:'<h1>呵呵哒</h1>'})
Vue.component('xixi',component)

  • 简写 全局组件创建的简写 参数1 组件名 参数2 组件的配置项

    Vue.component('xixi',{template:'<h1>呵呵哒</h1>'})

局部组件

  • 局部组件和全局组件的创建方式是一致 注册方式不一样

  • 局部组件在哪注册在哪用

  • 局部组件注册在 实例里的配置项 components里(记得多个S)

    • components配置项后跟一个对象,注册组件名:创建的组件名.
      //创建局部组件
      let component = Vue.extend({ template: '<h1>这里是局部组件</h1>' })
      let vm = new Vue({
        el: '#app1',
        data: {
          name: '实例1'
        },
        components: {
          xixi: component,
            //也可以简写
          hehe: { template: '<h1>这里是局部组件hehe</h1>' }
        }
      })
      let vm2 = new Vue({
        el: '#app2',
        data: {
          name: '实例2'
        }
      })

实例的配置项和组件的配置

绑定元素 el template

数据 data 对象 data 函数

自定义指令 directive directive

方法 methods methods

组件 components component

计算属性

监听

组件的配置项

  • (一般局部组件都是复数)

template (模板)

  • /ˈtemplət/

  • 和实例里的 el 类似 关联dom元素

  • 如果dom结构简单,直接使用字符串.

    let component = Vue.extend({ template: '<h1>这里是局部组件</h1>' })

  • 如果dom复杂 可以用template标签组成组件模板

    • 该标签不会在页面中真正的渲染
    • 标签内部只能有一个根元素.
    • 组件一个组件模板
    <template id='tp1'>
    <div class='tp1'>
      <p v-for='item in 10'>{{item}}</p>
    </div>
  </template>

    • 注册一个组件

    • 全局

        Vue.component('hehe',{
     template:'#tp1'
   })

      • 局部

        • 组件里的data是一个函数 返回一个对象返回的对象就是我们的数据
        let vm1 = new Vue({
  el:'#app1',
  data:{
    name:'这里是实例'
  },
  components:{
    hehe:{
      template:'#tp1',
      data(){
        return{ name:'韩梅梅'}
      }
    }
  }
})

data(数据)

  • 实例中的data是一个对象,
  • 组件里的data是一个函数 返回一个对象返回的对象就是我们的数据

component(组件)

  • /kəmˈpoʊnənt/

  • 在实例中是components

  • 在组件中是component

    • 组件中也有component配置项,所以组件中也可以嵌套组件.

    • 如果组件中是嵌套关系.在使用中也要遵守嵌套关系

      let vm1 = new Vue({
  el:'#app1',
  data:{
    name:'这里是实例'
  },
  components:{
    hehe:{
      template:'#hehe',
      components:{
        xixi:{template:'#xixi'}
      }
    }
  }
})

  • 使用 xixi组件在放在heh组件模板内部使用

      <!-- 组件模板 -->
  <template id='hehe'>
    <div class='hehe'>
      这里是hehe组件
      <xixi></xixi>
    </div>
  </template>
<!-- hehe里的嘻嘻组件 -->
  <template id='xixi'>
    <div class='xixi'>
      这里是嘻嘻组件
    </div>
  </template>

methods(方法)

  • /ˈmeθəs/

  • 和在实例中使用方法类似

    let vm1 = new Vue({
  
  el:'#app1',
  data:{
    name:'这里是实例'
  },
  components:{
    hehe:{
      template:'#tp1',
      data(){
        return{
          num:1
        }
      },
      methods: {
        add(){
          console.log(this)
          // 组件里的this指向组件对象
          this.num++
        }
      },
    }
  
  }
})

filter(过滤器)

  • /ˈfɪltər/

  • 对数据进行处理并返回新的数据

  • 使用方式

    • {{要过滤的数据 |(管道符号) 过滤器的名字(可以传参)}}

  • 处理数据

    • Vue.filter

    • 参数1 过滤器名

    • 参数二 是一个函数

      • 函数里也有两个参数
        • /函数的第一个参数data就是要过滤的数据 也就是管道符号前面的东西
        • 第二个参数是用来接受传来实参的形参.

    • 全局过滤器例子 获得到一个时间 一般是时间戳格式 同一个时间显示不同的样子

      <div id="app">
    {{time|hehe}}<br>
    {{time|hehe('-')}}<br>
    {{time|hehe('、')}}<br>
    {{time|hehe('/')}}<br>
  </div>
<script>

Vue.filter('hehe',(data,params='.')=>{
   // params如果没有传参默认传递过来的是一个".",如果传参以传参为主.
  // 对数据做处理
  console.log('需要过滤的数据',data)
  let y= (new Date(data)).getFullYear()
  let m= (new Date(data)).getMonth()+1
  let d= (new Date(data)).getDate()
  // 处理数据
  // 一定要返回
  return  `${y}${params}${m}${params}${d}`
}) 
let vm=new Vue({
  el:"#app",
  data:{
    time:(new Date()).getTime()
  }
})

    • 局部过滤器例子

       <div id="app">
    {{time|hehe(123)}}

  </div>
<script>

let vm=new Vue({
  el:"#app",
  data:{
    time:(new Date()).getTime()
  },
  filters:{
    'hehe':(data,hehe)=>{
       return '理发店'+hehe
    }
  }
})

watch(监视器)

  • /wɑːtʃ/ 监视

  • 只要在被监视的数据发生改变的时候才会触发

  • watch:{需要监视的数据:()=>{}}

  • 监听数据的改变 有2个参数一个是更新前的值 一个更新之后的值

  • watch监听触发的时候 dom 还没有更新 所以数据是更改之后的但是dom 是更改之前的

    <div id="app">
    <p id='p'>{{num}}</p>
    {{name}}
    <button @click='add'>add</button>
    <button @click='change'>change</button>
  </div>
<script>

let vm=new Vue({
  el:"#app",
  data:{
   num:1,
   name:'韩梅梅'
  },
  methods: {
    add(){
      this.num++
    },
    change(){
      this.name='李雷雷'
    }
  },
  watch: {
    num:(newValue,oldValue)=>{
      console.log('num你变了')
      console.log('new',newValue)
      console.log('old',oldValue)
      console.log('p',document.getElementById('p')) //假的
      console.log('p',document.getElementById('p').innerText) //真的
    },
    name(){
      console.log('改名')
    }
  },
})

computed(计算器)

  • /kəm'pjuːtɪd/

  • 计算数据并返回

  • 缓存性

    • 相关属性发生改变计算会重新执行 无关属性发生改变计算属性不重新执行

  • 解决数据反复计算调用

    • 例如num这个数据需要计算并且需要反复调用的

      {{((num*2+4)-6*2/24)/8}}
     {{((num*2+4)-6*2/24)/8}}
     {{((num*2+4)-6*2/24)/8}}
     {{((num*2+4)-6*2/24)/8}}

  • 使用

    • 计算属性可以直接当标签 变量使用

      <div id="app">
     {{num}} {{name}}
     <!-- {{((num*2+4)-6*2/24)/8}}
     {{((num*2+4)-6*2/24)/8}}
     {{((num*2+4)-6*2/24)/8}}
     {{((num*2+4)-6*2/24)/8}} -->
     <hr>
     {{hehe}}
     // 缓存性的特点体现.如果点击add.上面的heh会改变.点击下面的改名按钮就不会变.
     <button @click='add'>add</button>
     <button @click='change'>改名</button>
  </div>
<script>

let vm=new Vue({
  el:"#app",
  data:{
   num:1,
   name:'韩梅梅'
  },
  methods: {
    change(){
      this.name='🙃'
    },
    add(){
      this.num++
    }
  },
  computed: {
    hehe(){
      console.log('计算属性执行了')
      return ((this.num*2+4)-6*2/24)/8
    }
  },

})

refs(绑定元素)

  • 通过ref绑定一个dom元素

  • 通过 this.$refs 获取绑定的dom 元素 this 实例对象组件对象

    <body>
  <div id="app">
     <p id='hehe'>呵呵</p>
     <p ref='xixi'>嘻嘻</p>
     <span ref='xixi'>嘿嘿</span>
     <button @click='getEl'>get</button>
  </div>
<script>
let vm=new Vue({
  el:"#app",
  methods: {
    getEl(){
      let hehe = document.getElementById('hehe')
      console.log(hehe)
      console.log(this)
      console.log(this.$refs.xixi)
    }
  },
})

slot(插槽)

  • 本身组件标签中的内容不会被渲染

  • solt 相当于在组件中开辟一段空间来存放组件标签内的内容

  • 匿名插槽

      <div id="app">
    <hehe>
      这里是测试内容
    </hehe>
  </div>
  <!-- 呵呵组件 -->
  <template id="hehe">
    <div class='test'>
        // 插入一个slot插槽就是自动把hehe标签内的内容插入一份
       <slot></slot>
       <h3>这里是呵呵组件</h3>
       <slot></slot>
    </div>
  </template>
<script>

let vm=new Vue({
  el:"#app",
  components:{
    hehe:{
      template:'#hehe'
    }
  }
})

    • 具名插槽

    • 当组件标签中的元素 要分开展示的时候 用具名插槽 slot 属性标致元素 用 name属性给slot标签起名

      之后元素和slot对应显示

      <div id="app">
    <hehe>
     <span slot='top'>我想在上面</span>
     <p slot="bottom">我想在下面</p>
    </hehe>
  </div>
  <!-- 呵呵组件 -->
  <template id="hehe">
    <div class='test'>
       <slot name='top'></slot>
       <h3>这里是呵呵组件</h3>
       <slot name='bottom'></slot>
    </div>
  </template>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 六 Vue组件
    一、什么组件 组件 (Component) 是 Vue.js 的重要组成部分。能够让你在复杂的应用中拆分成独立模块...
    唯老阅读 441评论 0赞 1
  • vue组件通信总结
    对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的各种方式的总结，总共有8种方式。 1....
    edc余悸阅读 417评论 0赞 3
  • Vue 组件
    此文基于官方文档，里面部分例子有改动，加上了一些自己的理解 什么是组件？ 组件（Component）是 Vue.j...
    陆志均阅读 3,936评论 5赞 14
  • Vue组件化通讯
    Vue组件化通讯 1. Vue的组成文件(.vue) 分为三部分，分别对应html,js,css <templat...
    sunny519111阅读 649评论 0赞 7
  • 儿童急走追黄蝶，飞入菜花无处寻
    上一章：休对故人思故国，且将新火试新茶 读诗目录 宿新市徐公店宋代：杨万里篱落疏疏一径深，树头花落未成阴。儿童急走...
    好卷有益阅读 4,574评论 3赞 21

友情链接更多精彩内容