【Vue.js】之组件基础知识

最新推荐文章于 2023-11-28 13:55:25 发布

夹心776655

最新推荐文章于 2023-11-28 13:55:25 发布

阅读量491

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_37086980/article/details/112976544

版权

Vue.js 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

组件

什么是组件

组件(Component)是Vue最强大的功能之一。组件是对功能的抽象封装，组件可以扩展HTML元素，封装可重用的代码。

为什么要使用组件

在大型应用中为了分工、代码复用，不可避免地需要将应用抽象为多个相对独立的模块，组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

如何使用组件

1.全局注册

Vue.component('组件名称', {
	template: "<div>组件模板内容</div>"
    data () {
    	return {
    	}
    },
    methods: {}
})

组件的名称的命名规范：

    1. 由数字字母下划线短横线组成， 不能由数字开头
    2. 建议采取大驼峰法命名
    3. 建议不要使用html的标签名（如果要使用标签名，首字母大写）

options配置项:

    template （必填）
    data (必须是一个函数)
    methods

tempate的写法：

    1. html的字符串 （根元素不能使用template）
    	注意：
        	template中只能有一个根元素
    2. 'template标签的选择器'  
        注意：
            1. template标签不要放在Vue实例的节点中
            2. 因为IE不支持template标签, 需要在template上设置style="display:none"
            3. template中只能有一个根元素

代码实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>组件化</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <template id="one" style="display: none;">
      <div>
        <h1>你好，世界！！1</h1>
        <h1>你好，世界！！2</h1>
      </div>
    </template>
    <div id="app">
      <child-one></child-one>
      <child-one></child-one>
    </div>
    <script>
    Vue.component('childOne', {
      data () {
        return {
          inputValue: '',
          num: 0
        }
      },
      // template: `<div>
      //   <h1>ChildOne</h1>
      //   <input type="text" v-model="inputValue" />
      //   <h1>输入的内容：{{inputValue}}</h1>
      //   <button @click="addNum">按钮</button>
      //   <h1>{{num}}</h1>
      // </div>`,
      template: '#one',
      methods: {
        addNum () {
          this.num++
        }
      }
    })

    new Vue({
      el: '#app'
    })

    
    function myComponent (options) {
      this.data = options.data()
    }

    const options = {
      data () {
        return {
          x: 100
        }
      }
    }
    var a = new myComponent(options)
    var b = new myComponent(options)
    a.data.x = 200
    console.log(b)
    </script>
</body>
</html>

2.局部注册

var myComponent = {
    template: "<div>组件模板内容</div>"
    data () {
        return {
        	// 数据
        }
    },
	methods: {}
}

new Vue({
    el: '',
    components: {
    	组件名称: myComponent`
    }
})

局部注册还有一个单文件组件的定义形式，在后续的项目中会学到

在HTML中使用 <组件名称></组件名称> 或者 <组件名称 />

如果组件定义时采取大驼峰法命名，模板全部小写，不同的单词之间使用短横线分隔

组件名不能与HTML标签重名(后期使用vue-cli可以打破该条规则)
组件名在vue中采取驼峰法命名，在HTML中采取短横线连接

eg: 在vue中定义一个名称为globalHeader的组件在HTML中使用
template的模板只能有一个根元素，可以使用字符串也可以使用template标签
data必须为函数

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <template id="header">
      <div>
        <h1>child-one----{{msg}}</h1>
        <button @click="changeMsg">改变</button>
      </div>
    </template>

    <div id="app">
      <child-one></child-one>
    </div>
    <script>
   /*
      第三种注册方式
        单文件组件   xxx.vue
    */
    const childOneCmp = {
      data () {
        return {
          msg: 'hello'
        }
      },
      template: '#header',
      methods: {
        changeMsg () {
          this.msg = '您好'
        }
      }
    }

    new Vue({
      el: '#app',
      components: {
        ChildOne: childOneCmp
      }
    })
    </script>
</body>
</html>

组件之间可以嵌套

const appCmp = {
      template: `<div>
        <h1>主页面</h1>
        <child-one></child-one>
      </div>`,
      // 嵌套组件
      components: {
        // 组件只能在当前的组件的模板中使用
        ChildOne: childOneCmp
      }
    }

    new Vue({
      el: '#app',
      components: {
        App: appCmp
      }
    })

3.动态组件

在模板中使用 <component is="组件的名称"></component>
缓存组件
<keep-alive>
     需要缓存的内容
</keep-alive>

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
   <title>动态组件</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
   <div id="app">
     <div class="tab">
       <span @click="onTab('GoodsDetail')">图文详情</span>
       <span @click="onTab('GoodsQuestion')">常见问题</span>
       <span @click="onTab('GoodsComment')">评论</span>
     </div>
     <keep-alive>
       <component :is="cmpName"></component>
     </keep-alive>
   </div>
   <script>
   
   const GoodsDetail = {
     template: `<h1>图文详情</h1>`,
     mounted () {
       console.log('图文详情 mounted')
     }
   }
   const GoodsQuestion = {
     template: `<h1>常见问题</h1>`,
     mounted () {
       console.log('常见问题 mounted')
     }
   }
   const GoodsComment = {
     template: `<h1>评论</h1>`,
     mounted () {
       console.log('评论 mounted')
     }
   }
   new Vue({
     el: '#app',
     data: {
       cmpName: 'GoodsDetail'
     },
     components: {
       GoodsDetail,
       GoodsQuestion,
       GoodsComment
     },
     methods: {
       onTab (name) {
         this.cmpName = name
       }
     }
   })
   </script>
</body>
</html>

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue.js】之组件基础知识

组件什么是组件组件(Component)是Vue最强大的功能之一。组件是对功能的抽象封装，组件可以扩展HTML元素，封装可重用的代码。为什么要使用组件在大型应用中为了分工、代码复用，不可避免地需要将应用抽象为多个相对独立的模块，组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。如何使用组件1.全局注册Vue.component('组件名称', { template: "<div>组件模
复制链接

扫一扫