佳丽总结：超级详细Vue组件
佳丽总结：超级详细Vue组件
普通组件（四种方式）
一、Vue.extend配合Vue.component
<div id="app"> <!-- 3、使用组件 --> <abc>{{message}}</abc> </div>//1、定义组件模板 var xxx = Vue.extend({ template: `<h1>这是两个<br>小鹿 <img src="../../测试图片/1.jpg"> </h1>` }) //2、注册组件 Vue.component("abc", xxx) const app = new Vue({ el: '#app', data: { message: 'helloworld' }, methods: { } })
二、直接使用Vue.component：
<div id="app"> <!-- 2、调用组件 --> <abc></abc> </div>//直接定义组件 Vue.component('abc',{ template:`<div> <h1>hhhhhhhh</h1> <p>啊哈哈哈</p> </div>` }) const app = new Vue({ el: '#app', data: { }, methods: { } })
三、定义script标签中
<div id="app"> <!-- 调用组件 --> <account></account> </div>//将字符串定义到script标签中 <script id="tmp1" type="x-template"> <div> <a href="#">登录</a>|<a href="#">注册</a> </div> </script>//定义组件 <script> Vue.component('account', { template: '#tmp1' }) const app = new Vue({ el: '#app', data: { }, methods: { } }) </script>
四、（推荐写法）
<div id="app"> <!-- 3、调用组件 --> <abc></abc> </div> <!-- 1、定义模板 设置id值 --> <template id="tmp1"> <div> <h1>hahahha</h1> </div> </template> <script> // 2、定义模板，一个是模板名称，一个是模板与id值连接 Vue.component('abc', { template:'#tmp1' }); const app = new Vue({ el: '#app', data: { }, methods: { } }) </script>
组件的父子关系
在常规状态下不能夸区域访问。
组件的动态切换
实质是系统（Vue）自己定义了一个标签，标签的名字叫component ,compont这个标签定义了一个属性，这个属性叫is
<component v-bind:is="变量" ></component>
组件传值(父传子、子传父)
父传子:
即父组件的值传递给子组件，
一、分别定义两个组件，父组件和子组件
二、在子组件中定义：props:[属性]
三、这个属性，在子标签中使用，即：v-bind:属性=父组件中data返回的数据。
四、在子组件中去使用它，即：{{属性}}
父传子图示：
子传父：
即子组件的值传递给父组件
子传父图示：
组件插槽
在子标签中去插入变量后，在子组件中用
事件总线
图示：
在脚手架中使用组件
图示：
附录
普通路由完整代码
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE Project</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<a href="#/aa">AAA</a>|<a href="#/bb">BBB</a>
<router-view></router-view>
</div>
<template id="aaa">
<div>
<p>This is a </p>
</div>
</template>
<template id="bbb">
<div>
<p>This is b </p>
</div>
</template>
<script>
var a1 = Vue.component('aaa', {
template: '#aaa'
});
var b1 = Vue.component('bbb', {
template: '#bbb'
});
var r = new VueRouter({
routes: [
{ path: '/aa', name: 'x', component: a1 },
{ path: '/bb', name: 'y', component: b1 }
]
})
const app = new Vue({
el: '#app',
router: r,
data: {
},
methods: {
}
});
</script>
</body>
</html>
路由传参完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE Project</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login?name=yujie&pwd=123">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<template id="aa">
<div>
<h3>登录组件---{{route.query.name}}---{{route.query.pwd}}</h3>
</div>
</template>
<template id="bb">
<div>
<h3>注册组件</h3>
</div>
</template>
<script>
var login = Vue.component('aa', {
template: '#aa'
});
var register = Vue.component(
'bb', {
template: '#bb'
});
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register },
],
});
new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>
路由样式的完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE Project</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
/* 设置高亮方式一 */
/* .router-link-active {
color: lightblue;
} */
/* 设置高亮方式二 */
.active {
color: orange;
}
/* 设置动画 */
.v-enter,
.v-enter-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 设置动画 -->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
var login = Vue.extend({
template: '<h3>登录组件</h3>'
});
var register = Vue.extend({
template: '<h3>注册组件</h3>'
});
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register },
],
// 设置高亮方式二 还是要在style中去设置active的样式
linkActiveClass: 'active'
});
new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>
事件总线的完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE Project</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>总线案例</p>
<father></father>
<son></son>
</div>
<template id='father'>
<div class="father">
<p>this is father 【{{msg}}】</p><input type="text" v-model="msg">
<button v-on:click="show">发送</button>
</div>
</template>
<template id='son'>
<div class="son">
<p>this is 【{{msg}}】</p>
</div>
</template>
<script>
var bus = new Vue({});
Vue.component('father', {
template: '#father',
data() {
return { msg: 'father hell,world' }
},
methods: {
// 一个发送
show() {
bus.emit('func', this.msg);
}
}
});
Vue.component('son', {
template: '#son',
data() {
return { msg: 'son hell,world' }
},
mounted() {
//一个接收
console.log('接收。。。。');
bus.on('func', (data) => {
console.log(data)
this.msg = '接收：' + data
});
}
});
const app = new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
<style>
#app {
border: 4px solid black;
width: 400px;
}
.father {
border: 2px solid red;
width: 80%;
}
.son {
border: 2px solid blue;
width: 80%;
}
</style>
</body>
</html>