冇事来学系--Vue2.0中组件化编码流程与数据传递

简介: 组件之间的数据传递

组件之间的数据传递


父传子

父组件写数据,并且在使用子组件标签的时候传递数据;

子组件在props节点中设置自定义属性,用于接收父组件的数据,接收的数据在子组件实例对象vc中,可以直接在模板中使用


子传父

在父组件中 (methods节点下) 写一个接收函数receive,设置一个形参x来接收子组件的数据,并且在使用子组件的时候传递这个函数;(:recieve="recieve")

子组件在props节点设置自定义属性,来接收父组件传来的函数 (props: [recieve]) ,接收的函数在子组件的实例对象vc身上,可以直接在模板中使用,也可以在methods节点中的事件处理函数里面通过this调用这个函数,并把数据作为实参传递( this.receive(数据) )

通过传参实现数据传递


父传孙

通过逐级传递,由父传子,子再传孙

父组件写数据,并且在使用子组件标签的时候传递数据;

子组件的props节点设置自定义属性接收,并且在子组件中使用孙组件的时候写入这个属性来传递

孙组件的props节点设置自定义属性接收子组件传来的数据,接收的数据在孙组件的实例对象vc上,可以直接在模板中使用


数据传递

  1. 实现静态组件:抽取组件,使用组件实现静态页面的效果
  2. 展示动态数据
  1. 数据类型、名称是啥

一堆数据用数组来存储,每一个数据又很多属性则用对象来表示

  1. 数据保存在哪个组件:
  1. 数据是一个组件在用 --> 放在组件自身即可
  2. 数据是一些组件在用 --> 放在他们共同的父组件上(状态提升)

注意:使用v-model时要注意不能绑定props里面的值,因为props里面的值是不允许被修改的

  1. 实现交互:从绑定事件开始

一般数据在哪里,操作数据的方法就在哪里(增删改查)

nanoid的使用--> 用于生成id

nanoid是一个函数,直接调用就会生成一个唯一的字符串

安装nanoid的库 ---> npm i nanoid

引入nanoid ---> import {nanoid} from 'nanoid' (nanoid使用了分别暴露)

使用: nanoid( )

  1. 交互,从绑定事件监听开始

组件化编码流程

目录
相关文章
|
2月前
|
JavaScript
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
|
2月前
|
前端开发
Vue2和Vue3的区别,在setup中定义的数据,在data(){return中能否定义到},在setup我们不能用this,写在return中可以用this,但是不能在setup否则会报错
Vue2和Vue3的区别,在setup中定义的数据,在data(){return中能否定义到},在setup我们不能用this,写在return中可以用this,但是不能在setup否则会报错
|
8天前
|
JavaScript
vue学习(8)数据代理
vue学习(8)数据代理
20 1
|
1月前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
这篇文章通过一个实际的Vue项目案例,演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组,创建Person.vue组件用于展示和添加用户信息,以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
|
6天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
10 0
|
1月前
|
JavaScript 前端开发
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
这篇文章介绍了Vue中使用v-model实现表单数据收集的方法,包括基础知识、代码实例和测试效果,并提供了一些额外建议。
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
|
1月前
|
JavaScript API
Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
这篇博客文章讲解了Vue中列表排序的方法,使用`filter`、`sort`和`indexOf`等数组方法进行数据的过滤和排序,并探讨了Vue检测数据变化的原理,包括Vue如何通过setter和数组方法来实现数据的响应式更新。
Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
|
1月前
|
JavaScript
Element - Vue使用slot-scope和v-for遍历数据为树形表格
这篇文章介绍了在Vue中使用`slot-scope`和`v-for`指令来遍历数据并将其渲染为树形表格的方法。
25 0
Element - Vue使用slot-scope和v-for遍历数据为树形表格
|
1月前
|
JavaScript 数据处理
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
|
1月前
|
JavaScript UED
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。