番外篇：VUE（十）自定义组件调用vue对象中的函数 

<body>
   <!--3、定义id为app的div-->
   <div id="app">
       <!--3)调用模板传递参数并通过v-on:show2调用vue对象的showindex方法-->
       <vue-div v-for="(item,index) in kcitems" :index="index" :item="item" v-on:show2="showindex(index)"></vue-div>
   </div>
   <script>
   
        //2、定义一个div列表模板 里面按显示结构插入两个插槽（即模板），name为模板名称
        Vue.component("vue-div",{
           props:["item","index"],
           template:'<div>          \
               <ul>                  \
                   <li>{{index}}==>{{item}} <input type="button" value="调用" v-on:click="show1(index)"/></li> \
               </ul> \
               </div>',
           methods:{
               //1)button调用show1方法
               show1:function(index){
                   //2)show2为调用模板时写的v-on:xx
                   this.$emit('show2', index);
               }
           }
        });
       //1、定义一个vue对象
       new Vue({
           el:"#app",
           data:{
               // 课程内容
               kcitems:["java","php","vue"]
           },
           methods:{
               //定义一个方法
               showindex:function(index){
                   alert(index);
               }
           }
       });
   </script>
</body>
posted @ 2021-05-31 19:22  努力的校长  阅读(740)  评论(0)    收藏  举报