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

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

<div id="app">
   <input type="text" v-model:value="promsg"/>
   <zkelm v-bind:message="propmsg"></zkelm>   
</div>
<script>
    new Vue({
         el:"#app",
         data:{
         propmsg:"小程序开发：www.zkelm.com"
             },
         components:{
                zkelm:{
                    props:['message'],
                    template:"<b>{{message}}</b>"
                 }
          }
       })
</script>

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

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

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

<div id="app">
   <ul>
      <zkelm v-for="item in sites" v-bind:message="item"> </zkelm>
   </ul>
</div>
<script>
   new Vue({
       el:"#app",
       data:{
          sites:[11,22,33,44,55,66,77,88]
        },
        components:{
              zkelm:{
                  props:['message'],
                  template:"<li>{{message}} </li>"
               }
         }
    })
</script>

运行结果：

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

<div id="app">
  <zkelm arr1="专业小程序开发：" arr2="www.zkelm.com" ></zkelm>
</div>
<script>
   new Vue({
       el:"#app",
       components:{
         zkelm:{
              props:['arr1','arr2'],
              template:"<b>{{arr1}}{{arr2}}</b>"
           }
        }
    })
</script>

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