Vue框架之组件

最新推荐文章于 2025-04-01 00:02:37 发布

宅羽

最新推荐文章于 2025-04-01 00:02:37 发布

阅读量560

点赞数

分类专栏： Vue框架

本文链接：https://blog.youkuaiyun.com/sky6even/article/details/104047916

版权

Vue框架专栏收录该内容

16 篇文章

订阅专栏

本文探讨了Vue.js中组件的重要性和使用。组件是Vue.js的核心特性，允许开发者创建可复用的UI部件。文章详细介绍了组件的全局注册，包括注册的参数和注意事项，如data属性必须是返回对象的函数，组件模板应具有单一根元素。此外，还提到了局部注册，这种注册方式限制了组件的使用范围，仅在其被注册的Vue实例中有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

◆ 组件：

组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装后可以进行重用。

◆ 组件注册：

1、全局注册：

全局组件注册后，任何vue实例都可以用

Vue.component('组件名称', { })

第1个参数是标签名称，第2个参数是一个选项对象

<div id="example">
  <!--  组件使用 组件名称 是以HTML标签的形式使用  -->  
  <my-component></my-component>
</div>
<script>
    //   注册组件 
    //  my-component 就是组件中自定义的标签名
	Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })

    // 创建根实例
    new Vue({
      el: '#example'
    })

</script>

组件注意事项：

组件参数的data值必须是函数同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串

<div id="app">
     <!-- 
		4、  组件可以重复使用多次 
	      因为data中返回的是一个对象所以每个组件中的数据是私有的
		  即每个实例可以维护一份被返回对象的独立的拷贝   
	--> 
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
      <!-- 8、必须使用短横线的方式使用组件 -->
     <hello-world></hello-world>
  </div>

<script type="text/javascript">
	//5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
    // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'
        }
      },
      template: '<div>{{msg}}</div>'
    });
    
    
    
    Vue.component('button-counter', {
      // 1、组件参数的data值必须是函数 
      // 同时这个函数要求返回一个对象  
      data: function(){
        return {
          count: 0
        }
      },
      //  2、组件模板必须是单个根元素
      //  3、组件模板的内容可以是模板字符串  
      template: `
        <div>
          <button @click="handle">点击了{{count}}次</button>
          <button>测试123</button>
			#  6 在字符串模板中可以使用驼峰的方式使用组件	
		   <HelloWorld></HelloWorld>
        </div>
      `,
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>

2、局部注册：

局部注册只能在当前注册它的vue实例中使用

  <div id="app">
      <my-component></my-component>
  </div>


<script>
    // 定义组件的模板
    var Child = {
      template: '<div>A custom component!</div>'
    }
    new Vue({
      //局部注册组件  
      components: {
        // <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
        'my-component': Child
      }
    })
 </script>