component

最新推荐文章于 2024-02-08 10:28:07 发布

丶面

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量366

点赞数

文章标签： Vue组件认识

本文链接：https://blog.youkuaiyun.com/weixin_45516357/article/details/101318098

版权

Vue - component

1.初识component

1.1 全局和局部

使用方法主要是要结合extend，还有全局和局部之分

Vue里面组件的扩展功能是通过Vue.extend() 来做扩展

全局： Vue.extend(options) //可以缩写，详见下面

Vue.component()

局部： components

用法：

Vue中组件的使用方式是类似于标签

为了符合H5的规范，那么我们需要将这些类似于标签一样的内容进行注册

<div id = 'app'>
     <Hello></Hello>
</div>
<script src= '../../vue.js'></script>  //引入vue
<script>
     //1.  全局 插件
     // Vue.extend(options)  对象格式  配合template 模板使用
    const Nice = Vue.extend ({
         template: '<h1>Hello World</h1>'
    })
    Vue.component( 'Hello' , Nice )  //左侧是标签名  右侧是我们引入的上面拓展
    
    new Vue({
        el: '#app'
    })
    
    ---------------------------------------------------
    // 2.  局部插入
     new Vue({
        el: '#app',
        components:{     //注意是复数
           'Hello': Nice     //将上面的Nice 引入 ，只会   
        }
    })
</script>

1.2 缩写

对于extend 我们是可以进行相应的缩写的

 // 引入 Vue 略
<script>
     //  具体写
    const Hello = Vue.extend({
        template: '<h1>Hello World</h1>'
    })
    Vue.component( 'Hello', Hello )
     // 缩写   推荐，还省个变量  
     Vue.component( 'Hello',{
         template: '<h1>Hello World</h1>'
     })
     
    // 局部变量类似
</script>

1.3 标签取名的注意

总结来说，就是我们书写在HTML中的自定义标签，除了一个单词的首字母大写，其它不能像script里面一样取名，推荐使用比如以下格式：

   2. <table-list></table-list>

这和HTML识别标签有关。

<div id = 'app'>
    <Hello></Hello>    //对
    <table-list></table-list>   //对
    <tablelist></tablelist>    //script取名需要一致
    <tableList></tableList>    //错
    <TableList></TableList>    //错
    
</div>
 <script>
     // 用全局举例
     Vue.component('Hello',{...})    //1
     Vue.component('TableList',{...})  //2
     Vue.component('table-list',{...}) //2
     Vue.component('tablelist' ,{...})   //3
     Vue.component('tableList' ,{...})   //4     
     Vue.component('TableList' ,{...})   //5        
     //  除非4，5 改成 3的 样子 ，如下：
     Vue.component('tablelist' ,{...})   //3
</script>

1.4 插入用is

插入父子级的关系的标签，不识别，出现了位置上的不对，可以使用is解决

这类型的直接父子级关系的标签，是不能直接用组件代替的，如果代替了，那么父级会将组件排斥在外面

解决： is属性

is属性的作用就是将一个绑定的容器解析为一个组件的模板

<div id = 'app'>
    <table>
        <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
        </tr>
        <table-list></table-list>   //没用is   结果   第一行456 ； 第二行 123
        <tr is = 'Hello'>   </tr>  //使用is    结果    第一行123 ； 第二行 456
    </table>
</div>
<script src='../../lib/vue.js'></script>
<script>
   //
    Vue.component(
        'Hello':{
              template: 
                 ` <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
       			 </tr> `             
         }
    )
     new Vue({
        el: '#app'
     })
</script>

2.简单tab 切换和component,keep-alive

简单的运用一下：

使用keep-alive可以将内容存在缓存中因为可以加快速度。

<div id = 'app'>
    <h1>{{headChange}} </h1>
    <keep-alive>
         <component :is = 'initName'>
        
          </component>
    </keep-alive>
    <button 
         @click = 'nameChange'
       >
        {{btnChange}}
    </button>
</div>
<script src = '../../lib/vue.js'></script>
<script>
 

  new Vue({
      el: '#app',
      data: {
          initName: 'LoginUser'
      },
      component:{
          'LoginUser': {
               template: 
                       `<div>
                           账号：<input type:text><br>
                           密码：<input type:password><br>
                        </div>`
           },'TelUser': {
               template: 
                       `<div>
                           手机号：<input type:text><br>
                           验证码：1234 <br> 
                        </div>`
           }
     },
      methods:{ 
          nameChange () {
              this.initName = this.initName === 'LoginUser'? 'TelUser' :'LoginUser' //1
              this.initName = this.initName === 'LoginUser' && 'TelUser'||'LoginUser'                                //2
          }   
      },
      computed: {   //需要一些逻辑等，还能返回值或数组，节省变量命名
          // 和上面的方法类似
          btnChange () {
              return this.initName === 'LoginUser'&& '切换手机登录' || '切换账号登录'
          },
          headChange () {
              return this.initName === 'LoginUser'&& '手机登录' || '账号登录'
          }
      }
      
  })
</script>

3. template

template标签可以写在html，使用id配合使用

<div id = 'app'>
    
</div>
<template id = 'father'>   //用id 配合可以 引用
    <h1>
           这世界很精彩，可以出去走走 
    </h1>
</template>
<script src = '../../lib/vue.js'></script>
<script>
    
   Vue.compenent(
       'Father' :{
           template: '#father'
       }
   )

</script>

4. 父子组件通信

父子组件通信主要是：需要将子插件的标签写在父插件里面，并且可以通过属性传递数据，props；各个组件都可以带数据。

<div id = 'app'>
    <Father></Father>
</div>
<template id = 'father'>
     <div>
         我是爸爸，我给儿子{{money}}
         <Son :money = 'money' ></Son>  //将钱通过属性传过去
    </div>
</template>
<template id = 'son'>
     <div>
         我是儿子，钱不多了，还有{{ remain }}
         <p>
             现在一共有：{{ money + remain }}
         </p>
    </div>
</template>
<script src = '../../lib/vue.js'></script>
<script>
    
   Vue.compenent(
       'Father' :{
           template: '#father',
             data () {
                return {   //返回必须是对象，因为Vue核心的get和set可以对对象属性进行遍历
                    money: 2000
                }
            }
       }
   )
    Vue.compenent(
       'Son' :{
           template: '#son',
            data () {
                return {   //返回必须是对象，因为Vue核心的get和set可以对对象属性进行遍历
                    remain: 100
                }
            },
            props: [ 'money' ]    //其实传送过来可能不是数字可以检测
            props: {
                'money' : Number ,  //检测一下数据是不是数字类型
                'money' : {
                    validator ( val ) {
                        return val > 3000 //检测是不是大于3000
                    }
                }
            }
       }
   )
    new Vue({
        el: '#app'
    })
</script>