【Vue】—props属性

<template><div><h2>Parent</h2><!-- 父子传递数据 --><Son :data='arr' msg='msg数据' :obj="obj" :number='number' :game='game' /></div>
</template><script>import Son from './Son';export default {components: {Son},data() {return {game: 'CF',number: 1,obj: {user: 'Lily',age: 18},arr: [{title: '王嘉尔',year: 2021,picurl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F10192950652%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631004355&t=16c701931087f9b3537191ba4deb7594'},{title: '王一博',year: 2020,picurl: 'https://pics2.baidu.com/feed/0d338744ebf81a4c633b6aa4fd3a5d5f252da66c.jpeg?token=11476c18354c409e2b80b5c2e6c5d3b1&s=BA8AF205CE6258947A3C2ED903005094'}]}}}
</script><style></style>

<template><div><h2>Son</h2><div v-for='(item,index) in data' :key='index'><div><img :src="item.picurl" alt=""></div><div><p>{{item.title}}</p><p>{{item.year}}年</p></div></div><p>msg:{{msg}}</p><p>number:{{number}}</p><p>user:{{obj.user}}</p><p>age:{{obj.age}}</p><p>游戏：{{game}}</p><button @click="clickme">获取this</button></div>
</template><script>export default {//props: ['data']props: {data: Array,msg: [String, Number, Boolean],obj: {type: Object,required: true,default: function () {return {user: 'admin',age: 0}}},number: {type: [Number, String],default: 100},game: {validator: function (value) {let arr = ['CF', '和平', 'LOL'];return arr.indexOf(value) !== -1;}}},methods: {clickme() {}}}
</script><style></style>

【Vue】—props属性相关推荐

vue props 属性值接受多个类型 _@jie
labelValue: {type: String | Number | Boolean,required: true,default: 0}
vue 组件，props 属性，Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
Vue组件中的data和props属性
组件中数据的绑定在vue中数据通过data属性进行绑定,如下 <!DOCTYPE html> <html lang="en"> <head>& ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
前端之vue的ref、props属性和mixin, 插件,局部样式
ref属性与props属性 ref ref作用使用 ref实例 props 三种方式数组 -- 简单声明接收对象 -- 接收并指定属性对象:{对象} -- 接收+指定属性+默认/必要性 pro ...
vue中组件的props属性（详）
今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配置项. 问题一:那props具体是怎么使用呢?原 ...
Vue中的 props 属性
1.什么是 props props 用于组件的传值,他的工作就是为了接受外面传过来的数据,是一个配置项,与data.el.ref 是一个级别的. 2.props 的使用 --1 先准备子组件 Tex ...
【视频】vue组件之props属性
P9vue组件之props属性 https://www.bilibili.com/video/av91679349?p=9
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

【Vue】—props属性

【Vue】—props属性

【Vue】—props属性相关推荐

最新文章

热门文章