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 ...
随机推荐
- nginx 请求限制
1.nginx 请求限制 1.连接频率限制 - limit_conn_module 2.请求频率限制 - limit_req_module 连接限制的语法 请求限制的语法 limit_conn_zon ...
- woocommerce分类页产品数量修改
我们用woocommerce建商城,不同的模板分类页产品数量不同,如果想要显示更多或更少的数量要如何修改呢?很简单,一行代码就能搞定!打开当前主题的function.php文件,加入如下代码,把18改 ...
- CentOS7.5 系统最小化安装与初始化配置
CentOS7.5 系统最小化安装与初始化配置 1.安装标准化的系统 1.1.系统安装期间的语言 选择:中文-简体中文,安装完成也会默认支持中文输出,便于管理 1.2.时区选择 亚洲上海,CST时区( ...
- 排序算法-冒泡排序（Java）
package com.rao.sort; import java.util.Arrays; /** * @author Srao * @className BubbleSort * @date 20 ...
- 复制excel表中的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- struts2学习1
struts2使用优势 自动封装参数 参数校验 结果的处理(转发|重定向) 国际化 显示等待页面 表单的防止重复提交 struts2具有更加先进的架构以及思想 使用拦截器 struts2的历史 str ...
- html2canvas@^1.0.0-rc.1
这个版本的html2canvas是我在npm找到的,有严重问题,如截图后字体变小,解决方法就是官网找个min.js的版本,放到项目中引用就好 https://html2canvas.hertzen.c ...
- Random Access Iterator 徐州网络赛（树形dp）
Random Access Iterator \[ Time Limit: 4000 ms \quad Memory Limit: 262144 kB \] 题意 给出伪代码,问按着伪代码在树上跑,能 ...
- Pandas | 26 疏离数据
当任何匹配特定值的数据(NaN/缺失值,尽管可以选择任何值)被省略时,稀疏对象被“压缩”. 一个特殊的SparseIndex对象跟踪数据被“稀疏”的地方. 这将在一个例子中更有意义. 所有的标准Pan ...
- 7-ESP8266 SDK开发基础入门篇--串口处理数据,控制LED
接着上一节的写 咱先做一个单片机串口接收到什么就回过来什么 咱自己写个发送函数,其实就是仿照官方的写的 别忘了 现在咱建个任务处理串口数据 下载进去 现在是三个任务都在运行了...操作系统是不是很神奇 ...