主要内容:
1 全局组件:
a : 定义一个全局组件
Vue.component(
‘global-component‘, {
template: `<div> 注意: template一定要包一层div
<h3>{{wanrong}}</h3>
<h2>{{wanrong}}</h2>
</div>`,
data() {
return {
wanrong: ‘hello‘,
}
}
}
);
2 全局组件的使用的两种方式:
a: 写在实例中:
new Vue({
el: ‘#app‘,
//如果写在下面, 则找到tmplate标签, 把它当做跟标签.渲染,
template:`<global-component></global-component>`
})
b : 写在标签里:
<div id="app">
<!--如果写在上面, 则以id为app的div为根标签-->
<global-component></global-component>
</div>
两种方式的区别: 如果写在实例中, 直接显示组件中的template, 如果写在div中, 多了一个以id为app的div标签
2 局部组件的应用:
a: 先创建一个对象:
let Header = {
template:`<h1>{{greeting}}</h1>`,
data(){
return{
greeting: ‘hello‘
}
}
};
b : 为了更加的符合规范, 创建了一个app对象, 作为程序入口
let App = {
//3使用子组件
template: `
<div>
<app-header"></app-header>
</div>
` ,
//2在父组件中注册子组件
components:{
‘app-header‘: Header
}
};
c: 实例
new Vue({
el:‘#app‘,
template: `<App></App>`,
components:{
App
}
})
流程:先创建两个对象, Header, App, 然后创建一个Vue实例, 注册组件App作为程序的入口, 为了使程序更加的规范 ,
然后,在实例中使用组件, 接着走到app组件, 在父组件中注册子组件, 使用子组件, 然后找到Header的template渲染.
3 父子组件之间的通信,
a : 父亲传递一个数据给孩子, 孩子接受数据使用props
b : 实例:
<div id="app"></div>
<script>
//1创建一个obj
let Header = {
template:`<div>
<h1>{{greeting}}</h1>
<h2>{{fData}}</h2>
</div>`,
//在子组件中用props接收父组件传过来的参数
props:[‘fData‘],
data(){
return{
greeting: ‘hello‘
}}};
let App = {
//3使用子组件
template: `
<div>
<app-header v-bind:fData="fatherData"></app-header>
</div>
` ,
//2在父组件中注册子组件
components:{
‘app-header‘: Header
},
data(){
return {
fatherData:0
}}};
new Vue({
el:‘#app‘,
template: `<App></App>`,
components:{
App
}})
</script>
</body>
4 子父之间的通信,
a : emit触发一个函数的执行, 还可以传参数给父组件, 父组件用于监听,
b : 实例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
//1创建一个obj
let Header = {
template: `<div>
<h1>hello</h1>
<button v-on:click="sonClick">点击让字体变大</button>
</div>`,
methods: {
sonClick: function () {
this.$emit(‘change-Size‘, 0.1)
}
}
};
let App = {
//3使用子组件
template: `
<div>
<span :style="{fontSize: postFontsize + ‘em ‘}">春暖花开</span>
<app-header v-on:change-Size="fatherClick"></app-header>
</div>
`,
//2在父组件中注册子组件
components: {
‘app-header‘: Header
},
data() {
return {
postFontsize: 1
}
},
methods: {
fatherClick: function (value) {
this.postFontsize += value
}
}
};
new Vue({
el: ‘#app‘,
template: `<App></App>`,
components: {
App
}
})
</script>
</body>
</html>
5 组件系统之混入:假如两个对象中都用到了一个方法, 可以把这个方法提取出来, 定义一个mixs对在用到的地方: mixins:[mixs]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="static/vue.min.js"></script>
</head>
<body>
<div id="app"></div>
// <!--第一版, 因为代码重复, 所以引入了混入-->
let mixs = {
methods:{
show: function (name) {
console.log(name + 1)
},
hide: function (name) {
console.log(name + 0)
}
}
};
let wanrong = {
template:`<div>
<button v-on:click="show(‘wanrong‘)">点击显示蓉蓉1</button>
<button v-on:click="hide(‘wanrong‘)">点击显示蓉蓉0</button>
</div>`,
mixins:[mixs]
};
let ningning = {
template: `<div>
<button v-on:click="show(‘ningning‘)">点击显示宁宁1</button>
<button v-on:click="hide(‘ningning‘)">点击显示宁宁0</button>
</div>`,
mixins:[mixs]
};
let App = {
template:`<div>
<my-wanrong></my-wanrong>
<my-ningning></my-ningning>
</div>`,
components:{
‘my-wanrong‘: wanrong,
‘my-ningning‘: ningning
}
};
new Vue({
el: ‘#app‘,
template:`<div>
<App></App>
</div>`,
components:{
‘App‘: App
}
})
</script>
</body>
</html>
6 组件系统之插槽: 可以放多个标签: <slot></slot>
<script src="static/vue.min.js"></script>
<style>
.body {
margin: 0;
}
.box {
width: 80px;
height: 50px;
background-color:paleturquoise;
float: left;
line-height: 50px;
}
</style>
</head>
<body>
<div id="app" >
<global-component>首页</global-component>
<global-component>免费课程</global-component>
<global-component>轻课</global-component>
<global-component>智能题库</global-component>
<global-component>学位课程</global-component>
<global-component>咨询</global-component>
</div>
<script>
//定义一个全局的组件
//插槽就是可以放多个标签
Vue.component(‘global-component‘, {
template:`<div class="box"><slot></slot></div>`
});
new Vue({
el: ‘#app‘,
})
</script>
7 组件系统之具名插槽: 为每个插槽起具体的名字
<script src="static/vue.min.js"></script>
<style>
body {
margin:0;
}
.box {
width:80px;
height:50px;
background-color: paleturquoise;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="app" >
<global-component>
<div slot="home">首页</div>
<div slot="lightcourse">轻课</div>
<div slot="degreecourse">学位课程</div>
</global-component>
</div>
<script>
//定义一个全局的组件
Vue.component(‘global-component‘, {
template:`<div class="box">
<slot name="lightcourse"></slot>
<slot name="degreecourse"></slot>
<slot name="home"></slot>
</div>`
});
new Vue({
el: ‘#app‘,
})
</script>
8 template格式, 就是把对象中的template单独隔离出来,
<body>
<div id="app"></div>
<template id="header">
<div>
<h1>Hello Vue</h1>
</div>
</template>
<script>
let Header = {
template: ‘#header‘
};
new Vue({
el: ‘#app‘,
template:`<div><app-header></app-header></div>`,
components:{
‘app-header‘: Header
}
})
</script>
</body>
9 组件系统之路飞导航栏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="static/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.header {
position: fixed;
top:0;
left:0;
width:100%;
}
.el-menu {
display: flex;
align-items: center;
justify-content: center;
}
.footer {
position: fixed;
bottom:0;
left:0;
width:100%;
}
.header img {
position: absolute;
left: 80px;
top: -4px;
width:118px;
height: 70px;
z-index:999
}
</style>
</head>
<body>
<div id="app">
</div>
<!--导航头-->
<template id="header">
<div class="header">
<img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">>
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">免费课程</el-menu-item>
<el-menu-item index="3">轻课</el-menu-item>
<el-menu-item index="4">学位课程</el-menu-item>
<el-menu-item index="5">智能题库</el-menu-item>
<el-menu-item index="6">公开课</el-menu-item>
<el-menu-item index="7">内部教材</el-menu-item>
<el-menu-item index="8">老男孩教育</el-menu-item>
</el-menu>
</div>
</template>
<!--导航尾部-->
<template id="footer">
<div class="footer">
<el-menu class="el-menu-demo" mode="horizontal"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">>
<el-menu-item index="1">关于我们</el-menu-item>
<el-menu-item index="2">联系我们</el-menu-item>
<el-menu-item index="3">商业合作</el-menu-item>
<el-menu-item index="4">帮助中心</el-menu-item>
<el-menu-item index="5">意见反馈</el-menu-item>
<el-menu-item index="6">新手指南</el-menu-item>
</el-menu>
</div>
</template>
<script>
let Header = {
template: "#header",
data() {
return {
activeIndex: 0
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
};
let Footer = {
template:‘#footer‘,
};
new Vue({
el: "#app",
template: `<div>
<app-header></app-header>
<app-footer></app-footer>
</div>
`,
components: {
"app-header": Header,
‘app-footer‘: Footer
}
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/gyh412724/p/9931926.html
时间： 2024-12-07 15:58:01