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 ...
随机推荐
- 2019南昌网络赛I:Yukino With Subinterval(CDQ) （树状数组套主席树）
题意:询问区间有多少个连续的段,而且这段的颜色在[L,R]才算贡献,每段贡献是1. 有单点修改和区间查询. 思路:46min交了第一发树套树,T了. 稍加优化多交几次就过了. 不难想到,除了L这个点, ...
- JMeter【第五篇】关联：5种方法
前几天在Q群里看到群友发的最近10年性能测试工具使用率的统计,最近的2018年,jmeter+loadrunner占了93%的使用率,说明这两个是主流,其中,jmeter的使用率逐年提升,现在已经超过 ...
- IDEA控制台输出中文乱码问题
IntelliJ IDEA 真的是一款很方便的Java开发工具,但是关于中文乱码这个问题我不得不吐槽,这个编码也弄得这么麻烦干嘛,真想找idea开发者干架,我敢打包票我能在一分钟之内一拳飞过去让他跪下 ...
- rn相关文档
RN相关文档: rn文档:https://reactnative.cn/ mbox文档:https://cn.mobx.js.org/ es6文档:http://es6.ruanyifeng.com/ ...
- mybatis框架-使用resultMap实现高级结果映射，collection属性的使用
需求:获取指定用户的用户信息和地址列表 修改user实体类 添加集合的引用. /** * 根绝用户id,获取该角色下的地址信息 * @param userID * @return */ public ...
- qt中窗体全屏
原文地址:https://www.cnblogs.com/wiessharling/p/3750461.html 近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一 ...
- Promise以及async和await的用法
Promise是一个异步加载的方式,处理时使用new Promise返回一个对象,该对象可以调用then方法,then方法中有两个参数,第一个参数是加载成功时执行,第二个参数是加载失败时执行,then ...
- P1553 数字反转（升级版）
Emma,关于这道题,我..不想说啥子,也就做了它一个下午左右吧(原由:本人太菜) 补充一个知识点goto语句: 这个东西特别的好用,可以直接无条件调到冒号后面的语句,进行操作. 举个例子: #inc ...
- 【cf比赛记录】Educational Codeforces Round 77 (Rated for Div. 2)
比赛传送门 这场题目前三题看得挺舒服的,没有臃肿的题目,对于我这种英语渣渣就非常友好,但因为太急了,wa了两发A后才意识到用模拟(可以删了,博主真的是个菜鸟),结果导致心态大崩 ---- 而且也跟最近 ...
- Android Studio 之 控件基础知识
1. TextView 和 EditText 控件常用属性 android:layout_width="match_parent" 宽度与父控件一样宽 android:layou ...