今日讲讲父子传值~

简介: 今日讲讲父子传值~

今天来讲讲父子传值中的几种方法~        

       项目中往往会把一些常用的公共代码抽离出来,写成一个子组件。或者在一个页面中的代码太多,可以根据功能的不同抽离出相关代码写成子组件,这样代码结构会更加简洁明了,后续维护更加方便。应用组件的时候就会涉及到组件之间相互传递参数以下进行简单的介绍,vue中的父子组件传值,要注意的是遵守单向数据流原则。所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据;但是,子组件中不能直接修改父组件传过来的数据,必须要向父组件传递一个事件来父组件需要修改数据,即通过子组件的操作,在父组件中修改数据;这就是单项数据流

子组件需要做的事:

①首先定义一个子组件叫son。

②在子组件里面设置一个data属性,当作父组件传过来的数值。

③用props声明一下这个数值是父组件传过来的参数。


父组件需要做的事:

①然后定义一个父组件叫father。

②引入子组件。

③注册子组件。

④使用子组件。

⑤给子组件绑定需要传过去的属性。

现在就说说这个父传子的方法:

:

在"标签"上传属性

<Card :name="name"></Card>

:

在props中

export default {
  props: {
    name: String
  },
  setup(props) {
    console.log(props.name);
  }
}

是不是很简单明了呢(有哪里不对或者不懂得,在评论区或者私信Q我哦~)

下面我们就说说子传父

:

触发,给一个事件传值

1. setup(props,{emit}) {
2.     emit("get","传递的数据");
3.   }

:

绑定传的时候起的事件名,接收参数

<Card @get="on"></Card>
相关文章
|
3天前
|
前端开发 API
react怎么实现父子组件传值?
react怎么实现父子组件传值?
10 1
|
3天前
父子组件传值
父子组件传值
|
3天前
|
JavaScript
vue怎么实现父子组件传值
vue怎么实现父子组件传值
10 0
|
3天前
|
JavaScript
vue通讯 传值 3大传值方法 快速上手 父子间传值和非父子间传值
vue通讯 传值 3大传值方法 快速上手 父子间传值和非父子间传值
|
3天前
|
前端开发
react怎么实现父子组件传值
react怎么实现父子组件传值
|
11月前
|
JavaScript
【Vue3 第十六章】非父子组件间传值
【Vue3 第十六章】非父子组件间传值
161 0
|
JavaScript
学习Vue3 第十四章(父子组件传参)
withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值
100 0
学习Vue3 第十四章(父子组件传参)
|
前端开发
#yyds干货盘点 react笔记之学习之props父子传值
#yyds干货盘点 react笔记之学习之props父子传值
81 0
#yyds干货盘点 react笔记之学习之props父子传值
|
前端开发
#yyds干货盘点# react笔记之学习之props父子传值
#yyds干货盘点# react笔记之学习之props父子传值
52 0
#yyds干货盘点# react笔记之学习之props父子传值
|
前端开发
前端项目实战37-父子组件传值都用usecallback套一层
前端项目实战37-父子组件传值都用usecallback套一层
59 0