vue-父子组件之传值和单项数据流问题
前言
我们知道 vue 中父子组件的核心概念是单项数据流问题,props 是单项传递的。那究竟什么是单项数据流问题,这篇文章来总结一下关于这个知识点的学习笔记。
正文
1.父组件传值给子组件
<div id="app"> <blog-item :title="title"></blog-item> </div> // 定义子组件 Vue.component("blog-item", { props: ['title'], data() { return { } }, template: "<p>{{title}}</p>" }) // 定义父组件 new Vue({ el: "#app", data() { return { title: "msg", } }, })
父组件通过 :title = "title" 将值传递给子组件,子组件中通过 props 来接收父组件的值,然后通过插值表达式渲染在页面中。
2.子组件的 props 类型约束问题
常见的类型约束如下:
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
除了上面常见的类型外,vue 还提供了构造函数和自定义函数来自定义子组件 props 的类型。
(1)构造函数自定义类型
//两个组件公共的自定义函数 function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName } //子组件中使用 Vue.component('blog-post', { props: { author: Person } //父组件中使用 var obj = new Person("1","2") <blog-post :author='obj'></blog-post>
上面的代码中,首先定义一个公共的自定义构造函数,通过该构造函数来可以来创建一个对象,该实例对象有两个属性,分别是 firstName 和 lastName,在父组件中调用该构造函数创建一个 obj 实例并传递给子组件,子组件定义类型为构造函数的 prop 接收该对象。
(2)自定义函数自定义类型
// 自定义函数 Vue.component('blog-post', { props: { propsA: String,//必须是字符串类型 propsB: [String,Number],//多个可选的类型 propsC: {type:Number,default:100},//定义类型并设置默认值 // 自定义验证函数 propsD:{ validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }
vue 中提供了非常灵活的来自定义子组件接收参数的类型,上面的代码中通过自定义了验证函数来约束父组件中的传值类型。
3.单项数据流问题
单向数据流是vue 中父子组件的核心概念,props 是单向绑定的。当父组件的属性值发生变化的时候,会传递给子组件发生相应的变化,从而形成一个单向下行的绑定,父组件的属性改变会流向下行子组件中,但是反之,为了防止子组件无意间修改了父组件中的数据而影响到了其他的子组件的状态,vue 规定了从下往上的数据流是不允许的。
当父组件的属性改变,会传递给子组件,而子组件的属性改变不会影响父组件,这样的话可能会觉得 props 有点鸡肋了,只能初始化组件的时候使用,在子组件内不能进行操作,因此我们在使用的时候经常有两种板房去操作props:(1)定义一个局部变量,并用props 初始化它,以后操作这个局部变量。(2)定义一个计算属性,处理props并返回。
<div id="app"> <blog-item :title="title1"></blog-item> <blog-item :title="title2"></blog-item> <blog-item :title="title3"></blog-item> <hr> <button @click='toclick'>点我</button> </div> // 定义子组件 Vue.component("blog-item", { props: ['title'], data() { return { } }, template: "<p>{{title}}</p>" }) // 父组件 new Vue({ el: "#app", data() { return { title1: "111", title2: "222", title3: "333" } }, methods: { toclick() { this.title3 = "000" } } })
<div id="app"> <blog-item :title="title"></blog-item> </div> // 定义子组件 Vue.component("blog-item", { props: ['title'], computed: { computedTitle() { return "computedTitle" + this.title } }, data() { return { subTitle: "subTitle" + this.title } }, template: "<p>{{title}}==={{subTitle}}==={{computedTitle}}</p>" }) // 父组件 new Vue({ el: "#app", data() { return { title: "111", } }, })
写在最后
以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。
原文地址:https://www.cnblogs.com/zaishiyu/p/15225877.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一天一大 lee(回文对)难度:困难-Day20200806
- 一天一大 lee(扫雷游戏)难度:中等-Day20200820
- 一天一大 lee(重新安排行程)难度:中等-Day20200827
- 一天一大 lee(机器人能否返回原点)难度:简单-Day20200828
- 一天一大 lee(有序链表转换二叉搜索树)难度:中等-Day20200818
- 一天一大 lee(钥匙和房间)难度:中等-Day20200831
- 一天一大 lee(最短回文串)难度:困难-Day20200829
- 一天一大 lee(预测赢家)难度:中等-Day20200901
- 一天一大 lee(反转字符串中的单词 III)难度:简单-Day20200830
- 一天一大 lee(平衡二叉树)难度:简单-Day20200817
- 一天一大 lee(组合总和)难度:中等-Day20200909
- 一天一大 lee(回文子串)难度:中等-Day20200819
- 一天一大 lee(组合)难度:中等-Day20200908
- es6学习笔记
- 一天一大 lee(图像渲染)难度:简单-Day20200816