vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组件是不行的。但是子组件可以通过$emit触发父组件的自定义事件来进行传值。
一、props
props用于父组件向子组件传值,在vue组件基础之创建与使用中使用了一个实例,这里还是如此,假如一个页面包含头部、内容、尾部三个部分,这是三个组件,而它们的父组件是App.vue组件。
现在父组件App.vue将数据传递到Vcontent.vue组件中,有三个步骤:
- 父组件中从后台获取数据
- 在父组件中使用的子组件绑定自定义属性
- 在子组件中验证传递数据的类型
- 在子组件中渲染数据
1、获取数据
现在假设已经从后台获取到了数据,父组件中已经有数据。
2、绑定自定义属性
在父组件中使用子组件(Vcontent),给子组件绑定自定义属性。
3、在子组件中验证数据类型
向将要传递的子组件中验证传递的数据类型,数据类型有和多种,根据自己写的数据类型填写:
String
Number
Boolean
Array
Object
Date
Function
Symbol
4、渲染数据
此时可以在子组件中使用传递过来的数据了
二、自定义事件
用于子组件向父组件传值,假设现在Vcontent组件中通过页面添加了一条数据,此时就需要
- 在父组件中自定义事件
- 在子组件中触发父组件中自定义事件
1、父组件自定义事件
2、触发自定义事件
事件绑定到Vcontent组件上,那么在对应的组件中来进行触发,使用this.$emit方法进行触发
总结:
- 父组件-----》子组件 传值使用props
- 子组件-----》父组件 传值使用this.emit
详情参考:https://cn.vuejs.org/v2/guide/components-props.html
vue组件基础之父子传值的更多相关文章
- Vue组件中的父子传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue组件封装及父子组件传值,事件处理
vue开发中,把有统一功能的部分提取出来,作为一个独立的组件,在需要使用的时候引入,可以有效减少代码冗余.难点在于如果封装,使用,如何传参,派发事件等,我会采取倒叙的方式进行说明.(本文总结于Vue2 ...
- Vue 组件基础完整示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件基础之创建与使用
一.创建组件 <script src="vue.js"></script> <!--引入vue.js文件--> <div id=" ...
- Vue.js 学习笔记之四:Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- Vue组件基础知识总结
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...
- Vue 组件基础完整示例2
简介此页面可以直接复制运行,包含以下应用: Vue slot插槽使用Vue v-model使用Vue props使用父子组件数据传递element-ui使用HTML方式注册子组件,可以将子组件数据写在 ...
随机推荐
- 前端学习(二十)jquery属性(笔记)
jq里面操作属性的方法: 设置属性: 设置一个: $(this).attr('src','img/pic2.jpg'); 设置一组: ...
- ajax请求的原生js实现
我们使用ajax请求一般都用的jQuery, axios封装好了的api, 那么如果只能用原生js, 我们该如何操作了? 上代码. 我们在同目录下写好一个json文件(data.json)用于请求测试 ...
- Java中的内部类怎么用
一.为什么需要内部类?java内部类有什么好处?为什么需要内部类? 首先举一个简单的例子,如果你想实现一个接口,但是这个接口中的一个方法和你构想的这个类中的一个方法的名称,参数相同,你应该怎么办?这时 ...
- Java中的杂流(闸总)
标准输入输出流 System.in: 标准输入流是InputStream的子类对象,字节输入流,只不过是jvm给定的唯一一个从键盘控制条读入的流. public static final InputS ...
- 【leetcode】959. Regions Cut By Slashes
题目如下: In a N x N grid composed of 1 x 1 squares, each 1 x 1 square consists of a /, \, or blank spac ...
- Array排序和List排序
public class SortTest { public static void main(String[] args) { int arr[]={12,4,45,23,5,7,9,33}; Sy ...
- 线段树求后继+环——cf1237D
/* 首先开三倍消环(两倍是不够的),倒序求值,线段树找一下后继即可 */ #include<bits/stdc++.h> using namespace std; #define N 3 ...
- 网关协议:CGI和WSGI
通常服务器程序分为web服务器和应用程序服务器.web服务器是用于处理HTML文件,让客户可以通过浏览器进行访问,主流的web服务器有Apache.IIS.Nginx.lighthttpd等.应用服务 ...
- NX二次开发-Block UI C++界面Enumeration(枚举)控件的获取(持续补充)
NX9+VS2012 public: void SetBlockUIShow(); void EnumInt::SetBlockUIShow() { //获取枚举控件 PropertyList* En ...
- (转)OpenFire源码学习之七:组(用户群)与花名册(用户好友)
转:http://blog.csdn.net/huwenfeng_2011/article/details/43413651 Group 在openfire中的gorop——组,也可以理解为共享组.什 ...