好资源导航 » 文章资讯 » vue全局组件与局部组件使用方法详解

vue全局组件与局部组件使用方法详解

2023-09-14 18:19:05 58

vue全局／局部注册，以及一些混淆的组件

main.js入口文件的一些常用配置，在入口文件上定义的public.vue为全局组件，在这里用的是pug模版.wraper的形式相当于

—main.js文件

**main.js入口文件的内容**

importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
//引入公用组件的vue文件他暴漏的是一个对象
importcpublicfrom'./components/public'

Vue.config.productionTip=false

//注册全局组件-要在vue的根事咧之前
//参数1是标签名字-string2是对象引入外部vue文件就相当与一个对象
Vue.component('public',cpublic)
//正常注册全局组件的时候，第二个参数应该是对象。
Vue.component('public1',{
template:'正常的组件模式'
})
/*eslint-disableno-new*/
//生成vue的根实例;创建每个组件都会生成一个vue的事咧
newVue({
el:'#app',
router,
template:'',
components:{App}
})

—public.vue组件为定义的全局组件在任何组件里都可以直接使用，不需要在vue实例选项components上在次定义，也不需要再次导入文件路径。

**public.vue的组件内容**



.wrapper
slot(text="我是全局组件"){{name}}

在parent.vue组件里，用到了public全局组件以及其他的子组件

parent.vue组件


.wrap
.input-hd
.title名称:
input.input(type="text",v-model="msg",placeholder="请输入正确的值",style="outline:none;")
.content-detail
.content-name我是父组件的内容
children(:msg='msg',number='1')
public
router-link(to='/parent/children2')第二个子组件
router-view





.wrap{
}
.input-hd{
display:flex;
flex-direction:row;
align-items:center;
height:70px;
}

children.vue是parent.vue的子组件，但是只在parent.vue作用域里可用


.wrapper
slot(text="我是子组件的text")我是子组件的内容
.name{{msg}}{{number}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue全局组件与局部组件使用方法详解

热门推荐

随机推荐