3.15

子改父的步骤

第一步使用vue里面的$emit发送了一个childchange

第二步在组件上使用@childchange='conter'绑定自定义事件 触发父组件的conter方法

第三步 在父组件的conter方法内把父组件的msg的值给改了

<div id="app"><!-- 父 -->
    <child :list="list" @ulchange='ulchange'/><!-- 在父中，传了子的值。不写这个的话是不显示的 @ulchange就是下面传上来的自定义事件-->
</div>
<template id="child"><!-- 子 -->
   <div>
      <ul>
          <li v-for="(item,i) in list" :key="i" @click="change1(i)">
            {{item.content}}
          </li><!-- 首先循环，然后渲染，点击事件也写在这里 -->
      </ul> 
   </div>
 </template>   
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            list:[/* li里面的数据写在这里，list是一个数组，里面用对象表示，传值的时候直接写content */
            { content:"我是第个"},
            { content:"我是第gG个"},
            { content:"我是第Ge个"},
            { content:"我是第gE个"}
            ]
        },
        methods:{
            ulchange(i){/* 这个就是根据下面传上来的自定义事件，做了一个数组的修改 */
                this.list.splice(i,1,{content:'xxx'})
            }
        },

        components:{
            child:{
            template:"#child",/* 这个就是写的id */
            props:{
                    list:{
                       /* 这个必须要有，不写没有反应 */
                    }
                },
               methods:{
                change1(i){
                    /* 这个就是点击事件触发的一个自定义的事件 */
                    this.$emit('ulchange',i)
                }   
               } 
        }
    }
    })