Vue Props的用法

1、Props的使用场景：

props常用于父子组件的传值，什么是父子组件。子组件就是在一个组件里被引用的组件，父组件就是包含子组件的组件。

2、Props怎么用？

(1)创建父子组件

首先定义一个组件。我们的name和age的值不是这个组件里定义的，是在父组件里传值之后渲染的。我们先写一个子组件取名为StuProps.vue。在父组件里引用StuProps.vue组件。我们在父组件里引用的StuProps组件。之后往组件里传值。

3、父子组件的传值。

我们在子组件里写了name和foods。那么我们就在父组件引用的子组件里给name和foods传值。

4、子组件接收

我们在父组件里传了name、age、gender、foods的值。

在父组件下写下props: ["name","age","gender","foods"]

5、最终效果

Vue Props的用法相关推荐

vue中props的用法
vue使用props的用法日常编程中都会用到父组件用子组件.子用父的情况,下面先介绍一种子传父的情况 1.在父组件中 (1).首先是在其定义一个list属性以存储其数据值 (2).定义一个绑定属性& ...
vue实现php传数据,vue+props传递数据怎样实现
这次给大家带来vue+props传递数据怎样实现,vue+props传递数据的注意事项有哪些,下面就是实战案例,一起来看一下. 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传 ...
vue——props的两种常用方法
vue--props的两种常用方法 1.实现父-->子的通信举例如下: 父组件 parent.vue <children :channel="object1"> ...
你可能不清楚的 Vue Router 深度用法（二）
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
vue 具名插槽用法
vue 具名插槽用法 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vue solt(插槽)用法小结
之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解: 一般vue的slot用法有两种,一种是单独使用,一种是具名solt 1.单独使用: 如下 ...
Vue中watch用法
Vue中watch用法我前端开发时看到同事使用到了watch,所以稍微提取了一下操作方法(vue) 具体如下图: vue代码账户名称:<el-input v-model="qqNa ...
vue template html属性,详解template标签用法(含vue中的用法总结)
一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了 ...
vue props type设置多个类型，默认值
vue props type设置多个类型 props: {value: {// vue props type设置多个类型type: Number | null,required: true},arti ...

Vue Props的用法

1、Props的使用场景：

2、Props怎么用？

(1)创建父子组件

首先定义一个组件。我们的name和age的值不是这个组件里定义的，是在父组件里传值之后渲染的。我们先写一个子组件取名为StuProps.vue。在父组件里引用StuProps.vue组件。我们在父组件里引用的StuProps组件。之后往组件里传值。

3、父子组件的传值。

我们在子组件里写了name和foods。那么我们就在父组件引用的子组件里给name和foods传值。

4、子组件接收

5、最终效果

Vue Props的用法相关推荐

最新文章

热门文章