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 ...
随机推荐
- ActiveMQ 入门和与 Spring 整合
ActiveMQ 入门演示 activemq 依赖 <dependency> <groupId>org.apache.activemq</groupId> < ...
- Python基础B（数据类型----交互）
数据类型 数字类型 一.整型(int) age = 18 % age=int(18) print(id(age)) print(type(age)) print(age) 4530100848 < ...
- MySQL版本问题导致的SQLException
背景 学习使用 SpringCloud 时,使用 消费者 调用 生产者 时抛出 SQLException,持久层框架为 MyBatis,数据库为最新版本的 MySQL 版本如下: Server v ...
- cookie session jwt-token
http是无状态的,即请求之间是相互独立的:即提供用户名/密码验证后,下次还需要再次提供 而cookie就是解决这个问题的 cookies 服务器验证通过后,在响应头中设置set-cookies,浏览 ...
- Layui 新标签打开
原文:https://blog.csdn.net/sr_www/article/details/81394365 layuiAdmin 后台管理模板 iframe版 在新标签中打开网页 / 在ifra ...
- 一步一步编写AVL树
第一步:定义结构体 typedef struct Node{ int d; //data ; //height struct Node* l=NULL; struct Node* r=NULL; No ...
- day 18
Only through experience of trial and suffering can the soul be strengthened, vision cleared, ambitio ...
- springboot自定义页面拦截
项目结构图 页面拦截代码 @Configuration public class WebConfig implements WebMvcConfigurer { @Override public vo ...
- 【神经网络与深度学习】neural-style、chainer-fast-neuralstyle图像风格转换使用
neural-style 官方地址:这个是使用torch7实现的;torch7安装比较麻烦.我这里使用的是大神使用TensorFlow实现的https://github.com/anishathaly ...
- MySQL常见的应用异常记录
>>Error Code: 1045. Access denied for user 'test'@'%' (using password: YES) 使用MySQL的select * i ...