挑战百日学习计划(小程序开发)-第11天(Vue 动态组件 Prop）

打卡：第11天 ，必须发够100个知识点，每天进步1%. 热爱学习不能自拔， 哈哈、明天要见面谈客户， 有个琅东得客户需要开发一套（小程序商城：www.zkelm.com），所以今晚不熬夜了，虽然熬夜一直爽！ 困难点： 比如减肥，都知道少吃，但是就控制不住，怎么控制自己呢？ 世界上的一切难题就存在这里
Vue动态props 如何实现动态的输入，并在component里面显示， 使用的办法是 v-bind 而 v-model绑定的必须是双向绑定

new Vue({ el:"#app", data:{ propmsg:"小程序开发：www.zkelm.com" }, components:{ zkelm:{ props:['message'], template:"{{message}}" } } })

运行结果：小程序开发：www.zkelm.com

而且当你更改 input的值的时候 会组件的渲染值也会跟着改变

list使用component组件渲染多个li元素，

new Vue({ el:"#app", data:{ sites:[11,22,33,44,55,66,77,88] }, components:{ zkelm:{ props:['message'], template:"

{{message}}

" } } })

运行结果：

**props:[arr1,arr2,arr3] 支持多参数传入

new Vue({ el:"#app", components:{ zkelm:{ props:['arr1','arr2'], template:"{{arr1}}{{arr2}}" } } })

输出结果：专业小程序开发：www.zkelm.com

zkelm.com 原创文章 13获赞 8访问量 1158 关注 私信 展开阅读全文
作者：zkelm.com

VUE 小程序 程序开发 程序 学习 动态 小程序开发