Vue定义子组件与父组件通信数据并渲染(父向子通信和子向父通信)

60 阅读3分钟
Title


在这里插入图片描述

2、设置数据类型以及默认值

在这里插入图片描述

Title


运行效果

在这里插入图片描述

二、子向父通信(并渲染数据)


1、搭建相关页面

在这里插入图片描述

Title

运行点击

在这里插入图片描述

看似效果可以但是实际子组件并没有影响父组件的数据,而且报错了

在这里插入图片描述

num的值是由父组件传递给子组件的值,当子组件修改其值的时候

父组件会重新覆盖其子组件的值,导致无法修改子组件的值,产生错误

2、因此子组件是不能直接修改父组件传递过来的值的,所以要通过父组件来修改子组件的值(子组件通知父组件去修改数据)

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道

HTML

  • HTML5有哪些新特性?

  • Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?

  • 如何实现浏览器内多个标签页之间的通信?

  • ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?

  • 简述⼀下src与href的区别?

  • cookies,sessionStorage,localStorage 的区别?

  • HTML5 的离线储存的使用和原理?

  • 怎样处理 移动端 1px 被 渲染成 2px 问题?

  • iframe 的优缺点?

  • Canvas 和 SVG 图形的区别是什么?

JavaScript

  • 问:0.1 + 0.2 === 0.3 嘛?为什么?

  • JS 数据类型

  • 写代码:实现函数能够深度克隆基本类型

  • 事件流

  • 事件是如何实现的?

  • new 一个函数发生了什么

  • 什么是作用域?

  • JS 隐式转换,显示转换

  • 了解 this 嘛,bind,call,apply 具体指什么

  • 手写 bind、apply、call

  • setTimeout(fn, 0)多久才执行,Event Loop

  • 手写题:Promise 原理

  • 说一下原型链和原型链的继承吧

  • 数组能够调用的函数有那些?

  • PWA使用过吗?serviceWorker的使用原理是啥?

  • ES6 之前使用 prototype 实现继承

  • 箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?

  • 事件循环机制 (Event Loop)

开源分享:docs.qq.com/doc/DSmRnRG…