目录
Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E3%80%8B-%E7%BB%84%E4%BB%B6-%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E5%BC%8F%E5%8F%8A%E7%9B%B8%E5%85%B3%E7%BB%86%E8%8A%82-toc" style="margin-left:0px;">《Vue学习笔记》-组件-组件切换的方式及相关细节
1.组件切换-方式1
2.组件切换方式2-1（简单例子）
3.组件切换方式2-2（复杂例子）
Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E3%80%8B-%E7%BB%84%E4%BB%B6-%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E5%BC%8F%E5%8F%8A%E7%9B%B8%E5%85%B3%E7%BB%86%E8%8A%82">《Vue学习笔记》-组件-组件切换的方式及相关细节
1.组件切换-方式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--修饰符prevent的作用是阻止默认行为的发生，stop是阻止冒泡事件的发生-->
<a href="" v-on:click.prevent="flag=true">登录</a>
<a href="" v-on:click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {}
})
</script>
</body>
</html>2.组件切换方式2-1（简单例子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--Vue提供了component,来展示对应名称的组件-->
<!--component 是一个占位符，:is是属性，用来指定要展示的组件的名称-->
<!-- 注意：is不能跟字符串 -->
<component :is="'login'"></component>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {}
})
</script>
</body>
</html>注意：方式2-2只是在方式2-1的基础上，添加一些代码
3.组件切换方式2-2（复杂例子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<!--从14-1过渡到14-2,从简单实例到复杂实例-->
<!--总结：vue提供的标签
component,template,transition,transitionGroup
-->
<body>
<div id="app">
<a href="" @click.prevent="conName='login'">登录</a>
<a href="" @click.prevent="conName='register'">注册</a>
<!--Vue提供了component,来展示对应名称的组件-->
<!--component 是一个占位符，:is是属性，用来指定要展示的组件的名称-->
<!-- 注意：is不能跟字符串 -->
<component :is="conName"></component>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
var vm = new Vue({
el: '#app',
data: {
conName: 'login'
},
methods: {}
})
</script>
</body>
</html>
