vue组件值传递之父组件向子组件传递(props)
2023-09-11 14:19:38 时间
<template> <div class="hello"> <h1>{{ msg }}</h1> <ul> <li v-bind="message" v-for="item in message">{{item}} </li> </ul> <test v-bind:child_message="message"></test> </div> </template> <script> export default { name: 'Hi', data :function() { return { msg: 'HI', message:[11,22,33,44,55,66] } }, components:{ "test":{ template:`<div><li v-for='item in child_message '>传递到子组件的值:{{item}}</li></div>`, props:['child_message'] } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
另:props也可以做值验证 ,和设置默认值
props:{ child_message:{ type:Array, default:function(){ return [1,2,3,4,5,6,74]; } } }
相关文章
- VUE 归纳总结
- vue - 条件语句
- 【Vue】通过keep-alive实现路由组件的数据缓存
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
- Vue - 解决 ElementUI / Ant Design Vue 框架组件带有默认回调参数方法时,同时传递默认参数和自定义参数
- vue v-model 与 组件化的表单组件如何沟通
- Vue组件间的通信【子传父,父传子,同级传递,爷孙传递】
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Web前端-Vue.js必备框架(三)
- VUE图片懒加载-vue lazyload插件的简单使用
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- 每个vue组件中都有一个_uid
- vue-cli3整体迁移至服务端渲染nuxtjs
- Vue组件开发实例(详细注释)
- vue前台(八)
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- VUE 组件 事件传递