vue全局/局部注册,以及一些混淆的组件
主要。js入口文件的一些常用配置,在入口文件上定义的公众。vue为全局组件,在这里用的是哈巴狗模版.wraper的形式相当于& lt; div类=wraper> & lt;/div>
- <强> main.js 强文件
* * main.js入口文件的内容* *
从“Vue”进口Vue
导入应用程序从“/App。”
从“进口路由器。/路由器的//引入公用组件的vue文件他暴漏的是一个对象
从“进口cpublic。/组件/公共的
Vue.config。productionTip=false//注册全局组件,要在vue的根事咧之前//参数1是标签名字串2是对象引入外部vue文件就相当与一个对象
Vue.component(“公共”,cpublic)//正常注册全局组件的时候,第二个参数应该是对象。
Vue.component (public1, {
模板:“& lt; div>正常的组件模式& lt;/div>”
}）/* eslint-disable没有新*///生成vue的根实例;创建每个组件都会生成一个vue的事咧
新Vue ({
埃尔:“#应用”,
路由器,
模板:& lt; App/祝辞,
组件:{应用}
}）
之前
- <>强。vue 强组件为定义的全局组件在任何组件里都可以直接使用,不需要在vue实例选项组件上在次定义,也不需要再次导入文件路径。
* * public.vue的组件内容* *
& lt;模板lang=肮凸贰北?
.wrapper
槽(文本="我是全局组件”){{名称}}
& lt;/template>
& lt; script>
出口默认{
名称:“HelloWor”,//全局组件里数据属性必须是函数,这样才会独立,//在组件改变状态的时候不会影响其他组件里公用的这个状态
数据(){
返回{
姓名:“我是全局组件的
}
}
}
& lt;/script>
& lt; scoped>风格;
& lt;/style>
之前
在<强> parent.vue 强组件里,用到了公共全局组件以及其他的子组件
parent.vue组件
& lt;模板lang=肮凸贰北?
.wrap
.input-hd
.title名称:
input.input (type=" text " v模型=拔毒?占位符=扒胧淙胝返闹怠?)
.content-detail
.content-name我是父组件的内容
儿童(:味精=拔毒?数量=' 1 ')
公共
router-link(=/父母/children2)第二个子组件
router-view
& lt;/template>
& lt; script>
进口的孩子’。/孩子'//儿童(:味精=拔毒?数量=' 1 ')在组件里也可以传递自定义的属性,但是是字符串类型,
出口默认{
名称:“HelloWor”,
数据(){
返回{//通过道具将数据传递到子组件,并与v模型想对应的输入框相互绑定。
味精:“这个是父组件的道具——数据的
}
},
组件:{
孩子们
}
}
& lt;/script>
& lt; scoped>风格;
.wrap {
}
.input-hd {
显示:flex;
flex-direction:行;
对齐项目:中心;
身高:70 px;
}
& lt;/style>
之前
<强> children.vue 是parent.vue的子组件,但是只在parent.vue作用域里可用
& lt;模板lang=肮凸贰北?
.wrapper
槽(文本="我是子组件的文本”)我是子组件的内容
. name{{味精}}{{号码}}
& lt;/template>
& lt; script>
出口默认{
名称:“HelloWor”,//接受的时候是用道具接受,数组的形式,里面是字符串的形式。//也可以传入普通的字符串//在子组件中,道具接受到的状态当作vue的实例属性来使用
道具:[“味精”,“数量”)
}
& lt;/script>
& lt; scoped>风格;
& lt;/style>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
