Vue学习之组件切换及父子组件小结（八）
一、组件切换：
1、v-if与v-else方式：
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @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: {},
filters: {},
directives: {}
});
</script>
</body>
</html>
2、组件切换之component方式：
<!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>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.v-if 和v-else方式 -->
<!-- <a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login>
<register v-else="flag"></register> -->
<!-- 2.Vue 提供了 component ，来展示对应名称的组件 -->
<!-- component 是一个占位符，：is 属性，可以用来指定要展示的组件的名称 -->
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<component :is="comName"></component>
</div> <script>
Vue.component("login", {
template: "<h3>登录组件</h3>"
});
Vue.component("register", {
template: "<h3>注册组件</h3>"
});
var vm = new Vue({
el: "#app",
data: {
comName: ""
},
methods: {},
filters: {},
directives: {}
});
</script>
</body>
</html>
3、组件切换之动画效果：
<!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>
<script src="./lib/vue.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- 通过 mode 属性，设置组件切换时候的模式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div> <script>
Vue.component("login", {
template: "<h3>登录组件</h3>"
});
Vue.component("register", {
template: "<h3>注册组件</h3>"
});
var vm = new Vue({
el: "#app",
data: {
comName: ""
},
methods: {},
filters: {},
directives: {}
});
</script>
</body>
</html>
二、父子组件：
1、子组件默认是无法访问父组件的；
2、父组件V-ON传递方法到子组件，子组件需要接收定义到props数组中，才能使用
<!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>
<script src="./lib/vue.js"></script>
<style></style>
</head>
<body>
<div id="app">
<!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind)的形式，
把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，
供子组件使用 -->
<com1 v-bind:parentmsg="msg"></com1>
</div> <script>
var vm = new Vue({
el: "#app",
data: {
msg: "这是父组件中的数据"
},
methods: {},
components: {
// 子组件默认是无法访问到父组件中的data上的数据和methods中的方法
com1: {
data() {
// 子组件中的data数据，并不是通过父组件传递过来的，而是子组件啊自身私有的
// 比如：子组件通过AJAX，请求回来的数据，都可以放到data身上；
// data 上的数据，都是可读可写的
return {
title: "123",
content: "qqq"
};
},
template: '<h1 @click="change">这是子组件----{{ parentmsg }}</h1>',
// 组件中的所有 props 中的数据，都是通过父组件传递给子组件的
// props 中的数据，都是可读的，无法重新赋值
props: ["parentmsg"],
// 把父组件传递过来的 parentmsg 属性，先在 props 数组中定义一下，这样，才能使用这个数据
directives: {},
filters: {},
methods: {
change() {
this.parentmsg = "被修改了";
}
}
}
}
});
</script>
</body>
</html>
3、子组件通过事件调用向父组件传值：
<!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>
<script src="./lib/vue.js"></script>
<style></style>
</head>
<body>
<div id="app">
<com2 @func123="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input
type="button"
value="这是子组件中的按钮--点击它，触发：父组件传递过来的func 方法"
@click="myclick"
/>
</div>
</template> <script>
// 定义一个字面量类型的 组件模板对象
var com2 = {
// 通过指定一个ID，表示说，要去加载这个指定ID的 template 元素中的内容
// 当做组件的HTML结构
template: "#tmp1",
data() {
return {
sonmsg: { name: "小头儿子", age: "6" }
};
},
methods: {
myclick() {
// emit 触发、调用、发射
this.$emit("func123", this.sonmsg);
}
}
};
var vm = new Vue({
el: "#app",
data: {
datamsgFormSon: null
},
methods: {
show(data) {
this.datamsgFormSon = data;
console.log("调用了父组件身上的 show 方法：---" + data);
}
},
components: {
com2
// com2:com2
}
});
</script>
</body>
</html>
三、使用ref获取DOM元素和组件引用：
<!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>
<script src="./lib/vue.js"></script>
<style></style>
</head>
<body>
<div id="app">
<input type="button" value="获取元素" @click="getElement" ref="mybtn" />
<h3 id="myh3" ref="myh3">周末也在一直学习</h3>
<hr />
<login ref="mylogin"></login>
</div> <script>
var login = {
template: "<h1>登录组件</h1>",
data() {
return {
msg: "son msg"
};
},
methods: {
show() {
console.log("调用了子组件的方法");
}
}
};
var vm = new Vue({
el: "#app",
data: {},
methods: {
getElement() {
// console.log(document.getElementById("myh3").innerText);
// ref --[reference]
// console.log(this.$refs.myh3.innerText);
// console.log(this.$refs.mylogin.msg);
this.$refs.mylogin.show();
}
},
components: {
login
}
});
</script>
</body>
</html>
Vue学习之组件切换及父子组件小结（八）的更多相关文章
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue学习09 图片切换
目录 vue学习09 图片切换 定义图片数组:imgList:[],列表数据使用数组保存 添加图片索引:index 绑定src属性:使用v-bind,v-bind指令可以设置元素属性,比如src 图片 ...
- AntDesign vue学习笔记（四）使用组件切换
同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
随机推荐
- 【电脑】E470C如何关闭触摸板
经查 以这种方式关闭最为简单. 若E470C没有这个模块,就装一个! http://www.edowning.net/soft/145089.htm#downbtn2
- 学习Spring-Data-Jpa(九)---注解式方法查询之@NamedQuery、@NamedNativeQuery
1.@NamedQuery.@NamedNativeQuery @NamedQuery与@NamedNativeQuery都是定义查询的一种形式,@NamedQuery使用的是JPQL,而@Named ...
- React和Redux的开发经验之谈
1.显示控制用state,共享数据用redux,觉得可以不用redux的就不要用 2.表单项集中的地方,推荐用高阶组件,单个表单项,不推荐用高阶组件 3.涉及对服务数据的处理,在redux的model ...
- Mongo 服务器的安装
MongoDB的安装 CentOS 中使用yum安装: touch /etc/yum.repos.d/mongodb-org-4.2.repo vim /etc/yum.repos.d/mongodb ...
- docker 创建私有镜像之 registry
一.下载 registry 镜像 [root@localhost ~]# docker pull registry Using default tag: latest latest: Pulling ...
- servlet中的doGet()与doPost()以及service()的用法
doget和dopost的区别 get和post是http协议的两种方法,另外还有head, delete等 1.这两种方法有本质的区别,get只有一个流,参数附加在url后,大小个数有严格限制且只能 ...
- Java判断文件类型
通常,在WEB系统中,上传文件时都需要做文件的类型校验,大致有如下几种方法: 1. 通过后缀名,如exe,jpg,bmp,rar,zip等等. 2. 通过读取文件,获取文件的Content-type来 ...
- Ubuntu 在终端关闭情况下仍然运行进程
参考: 让Linux关闭终端(关闭SSH等)后,程序继续运行 Ubuntu 在终端关闭情况下仍然运行进程 在 Ubuntu 16.04 系统下使用 screen 命令在终端关闭情况下仍然运行进程.具体 ...
- idea从github导入maven项目
原文地址:https://blog.csdn.net/dianyongpai3113/article/details/82784716 之后next.finish就好了
- Netty4实战 - TCP粘包&拆包解决方案
Netty是目前业界最流行的NIO框架之一,它的健壮性.高性能.可定制和可扩展性在同类框架中都是首屈一指.它已经得到了成百上千的商业项目的验证,例如Hadoop的RPC框架Avro就使用了Netty作 ...