15 组件的切换和对组件的data的使用

本文主要是介绍15 组件的切换和对组件的data的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

划重点

a 标签的使用
事件修饰符
组件的定义
组件的切换：登录 / 注册

泡椒鱼头：微辣

<!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>Document</title><script src="./lib/vue-2.6.10.js"></script><style></style>
</head><body><div id="app"><mycom1></mycom1><mycom2></mycom2><!-- 下面是通过 if / else 实现组件切换的；但是这个是有限制的：如多个组件的切换 使用if /else 就不好用了 --><a href="" @click.prevent="flag=true">登陆</a><a href="" @click.prevent="flag=false">注册</a><my-com5 v-if="flag"></my-com5><mycom6 v-else="flag"></mycom6><!--  下面通过使用一种 包裹定义组件的方式 来切换 组件的使用 --><!-- Vue 提供了 component ，来展示对应名称的组件component 是一个占位符， :is 属性；可以用来指定组件的名称注意⚠️：在:is 中：如果直接填写使用组件的名称应该用单引号包含起来： " 'zhujian_name'  "
--><component :is=" 'mycom6' "></component>
<hr>
<!--  注意：  组件名称用 单引号 ' Name '  包括起来的  -->
<a href="" @click.prevent="nameZjian = 'myCom5' ">登陆</a>
<a href="" @click.prevent="nameZjian = 'mycom6' ">注册</a>
<component :is=" nameZjian "></component></div><!--  组件定义 --><template id="mycomm3"><div><hr><h3>==={{  msg }}</h3></div></template><script>//组件中 data 的使用 ---------// 定义一个全局使用的组件：学习使用组件中的 data 注意和Vue中的区别：组件中的data是个 方法并且有返回值returnVue.component("mycom1", {template: '<h3>组件中data的使用：注意和 Vue中data的异同 --- {{msg }}</h3>',data: function () {return { msg: " 我是组件中 data的数据的引用" }}})Vue.component("mycom2", {template: '#mycomm3',data: function () {return { msg: " 我是组件中 data的数据的引用" }}})//组件的切换//组件的切换 组件1: 登陆Vue.component("myCom5", {template: '<h3>登陆页面</h3>'})//组件的切换 组件2:注册Vue.component("mycom6", {template: '<h3>注册页面</h3>'})Vue.component("mycom8", {template: '#mytem8',data: function () {return { msgdata: "组件切换" }}})var vm = new Vue({el: '#app',data: {flag: false,nameZjian:'mycom6' // 当前组件component 中的 :is 绑定的组件的名称；默认是mycom6},methods: {}})</script>
</body></html>