标签:绑定 com 个数 一个 直接 属性 color turn 传递
子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称。
props数组中的数据是只读的,父组件中的data是可读可写的。
子组件自己的data,子组件可直接访问,与父组件无关。
<div class="app"> <mycom1 v-bind:mymsg="msg"></mycom1> <!-- 子组件想要使用父组件中的数据时,需要通过在父组件上进行属性绑定(v-bind), 才能拿到父组件上的数据 --> </div> <template id="cmp1"> <div> <h1> 我是子一个组件+++我是父组件中的data通过props传递{{mymsg}} </h1> <h1>我是子组件中的data:{{mymsg1}}</h1> </div> </template> <script> var vm = new Vue({ el:‘.app‘, data:{ msg:‘hahahah‘ }, components:{ mycom1:{ template:‘#cmp1‘, props:[‘mymsg‘],//props是一个数组,用来定义属性绑定的父组件的数据,定义后才能使用 data() {//props中的数据是只读的,data中的数据是可读可写的 return{ mymsg1:‘heheheheeh‘ }//这里的data是子组件自己的数据,子组件可以直接访问,与父组件无关 } } } }) </script>
标签:绑定 com 个数 一个 直接 属性 color turn 传递
原文地址:https://www.cnblogs.com/qiqisusu/p/11372916.html