1:将需要挂载的组件放置在组件之中
2:全局挂载在main.js之中
从“Vue”进口Vue
导入应用程序从“/App.vue。”
从“进口取得时间。/组件/孩子/取得时间的//全局注册整个项目的组件都可以使用//注册给整个vue对象//引入需要注册的全局组件//在vue类的方法组件里面进行注册
Vue.component (v *,取得时间);
Vue.component (v *, {
模板:“& lt; div>{{味精}}& lt;/div> ",//字符串的标签模板
数据(){//当前模板的数据
返回{
味精:“时间”
}
}
});
新Vue ({
埃尔:“#应用”,
呈现:h=比;h(应用)
})
之前
3:局部挂载至当前父组件之内
& lt; script>//组件在谁里面使用在谁里面注册这种注册方式叫做局部注册//局部注册只能在父组件里使用
从“。/组件/导入topTitle systemtoptitle”;
从“。/组件/导入leftMenu systemleftmenu”;
从“。/组件/导入rightContent systemrightcontent”;//注册组件//注册完成之后使用组件
出口默认{
名称:“应用程序”,
组件:{//注册//常规写法键值写法
“v-toptitle”: topTitle,
“v-leftmenu”: leftMenu,
“v-rightcontent”: rightContent//简单写topTitle leftMenu rightContent
},
数据(){
返回{};
}
};
& lt;/script>
4:父组件传值给子组件
父组件:
& lt; template>
& lt; div id=皌optitle”比;
& lt; !——标志子组件是toptitle的子组件——比;
& lt; !——子组件接收值——比;
& lt; v-logo: sysname="名称"祝辞& lt;/v-logo>
& lt;/div>
& lt;/template>
& lt; script>
从’。/孩子/进口商标标志的
出口默认{
名称:“toptitle”,
组件:{
“v-logo”:标志
},
数据(){
返回{//比如下面的两个信息是后台返回的
名称:“学生信息管理”,
标志:“src/资产/logo.png”
}
}
}
& lt;/script>
子组件:
& lt; template>
& lt; div id=發ogoinfo”比;
& lt; !——注意此处为:src——比;
& lt; img类=發ogoimg”: src=" https://www.yisu.com/zixun/logoimg " alt="/比;
& lt;跨类=" systemname "在{{sysname}} & lt;/span>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{//子组件调用父组件的值//1简单写法//2约束数据类型的写法如果数据类型不一致会报警告//3如果父组件没有传值走默认值
名称:“logoinfo”,//道具:“标志”、“sysname”,/*道具:{
“logoimg”:字符串,
“sysname”:字符串
}*/道具:{
“logoimg”: {
类型:字符串,
默认值:" src/资产/wanmou.jpg”
},
“sysname”:字符串
},
数据(){
返回{//子组件定义道具属性接收父组件传递的数据
};
}
};
& lt;/script>
之前
5:子组件调用父组件的值
子组件:
& lt; template>
& lt; div id=發ogoinfo”比;
& lt; !——注意此处为:src——比;
& lt; img类=發ogoimg”: src=" https://www.yisu.com/zixun/logoimg " alt="/比;
& lt;跨类=" systemname "在{{sysname}} & lt;/span>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{//子组件调用父组件的值//1简单写法//2约束数据类型的写法如果数据类型不一致会报警告//3如果父组件没有传值走默认值
名称:“logoinfo”,//道具:“标志”、“sysname”,/*道具:{
“logoimg”:字符串,
“sysname”:字符串
}*/道具:{
logoimg: {
类型:字符串,
默认值:" src/资产/wanmou.jpg”
},
sysname:字符串,
parentinfo:对象
},
安装(){//1在子组件里获取整个父组件//子组件执行父组件的函数//让父母=this.parentinfo;//parent.childsend ();//2子组件获取父组件内置方法
让parentdata=https://www.yisu.com/zixun/this。父母美元;
console.log (parentdata);
},
数据(){
返回{//子组件定义道具属性接收父组件传递的数据
};
},
方法:{
sendmsg () {
console.log(“子组件函数”);
}
}
}
& lt;/script>
