vue组件

Posted 2022-04-04 susutong

一、全局组件

　　全局组件在注册之后可以在项目的任何模板中使用

　　全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

　　注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。一般是在main.js注册

//注册全局组件
Vue.component(‘myComponent‘, 
  props:[‘name‘,‘age‘],//这里可以写使用组件时传入的值
  template: ‘<div>msg,我是一个全局组件,我叫name,我今年age</div>‘,
  data() 
    return 
      msg: ‘hello world!‘ //这里可以写组件自定义的数据
    
  
)

 

//使用全局组件  可以传值
<myComponent name="lisa" age="23"></myComponent>

 

二、局部组件

　//局部组件注册，写在实例的components中

　components: 
      ‘my-component‘: 
        props:[‘name‘,‘age‘],
        template: `<div>msg,这是一个局部的自定义组件，只能在当前Vue实例中使用,我叫name，我今年age</div>`,
        data() 
          return 
            msg:‘hi‘
          
        
      
    

//局部组件使用  可以传值
<my-component name="luna" age="34"></my-component>