北京网络建站模板,网站建设项目概况,比较好的网站建设,wordpress开发微商分销系统props是Vue中用于传递数据的属性。通过在子组件的选项中定义props属性#xff0c;可以指定子组件可以接收的数据以及其他配置选项。父组件可以通过在子组件上使用特定的属性来传递数据。 目录 目录
App.vue
什么是App.vue
组件引用
props配置
组件复用
案例1#xff1a… props是Vue中用于传递数据的属性。通过在子组件的选项中定义props属性可以指定子组件可以接收的数据以及其他配置选项。父组件可以通过在子组件上使用特定的属性来传递数据。 目录 目录
App.vue
什么是App.vue
组件引用
props配置
组件复用
案例1隐藏真实年龄
以key:value的形式使用props
案例2在子组件修改收到的数据
小结 什么是App.vue 在前面文章中有提到App.vue是Vue页面资源的首加载项是项目主文件是页面入口所有页面都是在App.vue下进行切换的它由页面模板、页面脚本、页面样式组成。 !-- 结构 --
templateimg altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App/
/template!-- 交互 --
script
import HelloWorld from ./components/HelloWorld.vueexport default {name: App,components: {HelloWorld}
}
/script!-- 样式 --
style
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/styleApp.vue 是一个vue组件这个组件中包含三部分内容1.页面模板template2.页面脚本script3.页面样式style页面模板中定义了页面的 HTML 元素页面脚本主要用来实现当前页面数据初始化、事件处理等等操作页面样式就是针对 template 中 HTML 元素的页面美化操作
组件引用 在components文件夹下面新建一个UserInfo.vue组件使用大驼峰命名法该组件用于展示用户信息 将需要展示在页面的字段及数据在js中进行定义 templatedivh1用户名{{name}}/h1h1密码{{pwd}}/h1h1注册时间{{registerTime}}/h1h1年龄{{age}}/h1/div
/templatescriptexport default {name:UserInfo,data(){return {name:摔跤猫子,pwd:123456,registerTime:2023-10-31,age:18}}}
/script
回到App.vue引用上述所创建的组件并通过命令启动项目可以看到界面如下 !-- 结构 --
templateUserInfo /
/template 通过vue的开发者工具也可以看的更加的清晰。 props配置 组件复用
目前已经顺利将用户信息显示到界面上了那么我们尝试一下该组件多次使用是一个什么样的效果。回到App.vue代码在界面上复制多个组件并使用hr标签进行分割。 保存编译回到页面可以看到这是三个组件实例之间是互不影响的在开发者工具中改其中某一个UserInfo页面只会修改对应的那个组件实例的数据。 目前这种写法只能展示固定写死的数据如果某天这个组件别人也要使用的同时还需要展示不同的数据又该如何处理呢?是只能让他复制一个UserInfo.vue然后改为UserInfo2.vue吗?虽然效果能实现但这就不叫复用了。 首先将UserInfo.vue中的几个字段屏蔽掉 将数据通过参数传递的方式写在组件引用中 !-- 结构 --
templateUserInfo name摔跤猫子 pwd123456 registerTime2023-10-31 age24/
/template
回到页面刷新查看控制台发现报错了这是因为UserInfo对传入的数据还没有进行接收操作。 这里就要用到props了方式一写一个数组进行接收App.vue里传递写的什么这里接收就写什么顺序可以不用保持一致。 将UserInfo代码进行复制并传递不同的数据并保存编译可以看到该组件实现了复用效果。 案例1隐藏真实年龄 当通过App.vue将年龄数据传递至UserInfo.vue时如何将传入的年龄1? 直接在UserInfo.vue中通过age1的方式明显是无效的因为通过props传递进来的这个数据是一个字符串类型的数据。 解决思路1先乘1再加1强制类型转换 解决思路2在App.vue该参数前加上一个冒号 这里冒号代表的就是v-bindv-bind:age18如果不写v-bind直接写冒号代表动态绑定的意思意味着age的值是运行引号里面的红色的js表达式的结果。
如果在App.vue直接传递181的同时不加冒号他不会对该值进行计算只有加上冒号才会对该表达式进行计算。 以key:value的形式使用props
将props从数组的形式改成对象的形式以key:value的形式使用props在接收的同时对数据进行类型限制。 //使用方式2
props:{name:String,pwd:String,registerTime:String,age:Number
} 对key:value的形式进行强化在接收的同时对数据进行类型限制的同时对字段默认值进行指定以及非空的限制。 props:{name:{type:String,//name的类型required:true,//required是否必填,name是必填的},pwd:{type:String,required:true,},registerTime:{type:String,required:true,},age:{type:Number,//name的类型default:99 //default代表默认值,default和required一般不会同时出现}} 这里的required属性意味着该字段是必填如果引用该组件的时候没有传递控制台会提示报错。 案例2在子组件修改收到的数据 小结
props功能让组件接收外部传递进来的数据
传递数据 组件名 name*** /接收数据 方式1只进行接收操作
props:[ name ] 方式2接收的同时限制数据类型
props:{name:String
} 方式3接收的同时限制数据类型、是否必填、默认值
props:{name:{type:String,//name的类型required:true,//required是否必填,name是必填的default:摔跤猫子}
} 注props是只读的如果进行修改操作会在控制台警告如果实际业务有需要请复制props的内容至data中再去修改data中的数据
《小程序实战专栏》持续更新欢迎订阅https://blog.csdn.net/weixin_42794881/category_10483785.html《C#实战专栏》持续更新欢迎订阅https://blog.csdn.net/weixin_42794881/category_10492935.html
