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 ...
随机推荐
- apt-get update失败处理：*** Error in `appstreamcli': double free or corruption (fasttop): 0x00000000015c4bf0 ***
好像只要卸载一个东西就可以了(至少我的是这样): sudo apt-get purge libappstream3 再重新执行update命令, sudo apt-get update 参考链接: 1 ...
- Java 构造方法、final
构造方法:构造(创建)对象时使用的方法. 方法名必须与类名称完全相匹配: 构造方法不需要返回类型: 构造方法不能被static.final等关键字修饰,且不能有return返回语句: 伴随着new被调 ...
- python基础之八：知识小结及补充
一.python2 与python3 的区别 1.在2中print后可带扣号,也可不带,3中必须带,否则报错! #print 'hello python2' print('hello python3' ...
- JavaScript遍历
- NOIP动态规划大合集
1.前言 NOIP2003-2014动态规划题目大合集,有简单的也有难的(对于我这种动态规划盲当然存在难的),今天就把这些东西归纳一下,做一个比较全面的总结,方便对动态规划有一个更深的理解. 2.NO ...
- [cf113d]Museum
传送门 Solution 设一个状态为 \((x,y)\) 表示两人在的位置,求出每个状态期望出现的次数 设一个状态为 \(u\) , \(x_u^0=[u==(a,b)]\) 所以一个状态出现的次数 ...
- web前端图片模糊到清晰的实现过程
在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现? 默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图,然后我们 ...
- jiagu-工具使用
比较好的一套处理工具吧,感谢作者,原文地址:https://github.com/ownthink/Jiagu 练习一下使用 """ Funciton: jiagu测试 ...
- Python【每日一问】20
问: [基础题]: 企业发放的奖金根据利润提成.利润(I): 低于或等于10万元时,奖金可提10%: 高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: ...
- ReentrantReadWriteLock源码分析
代码在后面 读锁 = 共享锁 读锁写锁,公用一个Sync AQS state. 写锁是排他的,看到有人获取锁,他不会去获取,他获取了锁,别人也不会进来获取锁. 写锁的获取跟ReentarntLock一 ...