已更新至子组件传值给父组件

2022-10-28 11:46:22 +08:00 · 2022-10-28 11:46:22 +08:00 · ca478abb87
parent 6be1a6eb34
commit ca478abb87
2 changed files with 45 additions and 0 deletions
--- a/10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/复习子组件向父组件传递数据.html
+++ b/10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/复习子组件向父组件传递数据.html
--- a/10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/子组件传父组件数据（数组）.html
+++ b/10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/子组件传父组件数据（数组）.html
@ -0,0 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 </head>
 <body>
  <div id="app">
    <apps @contents="isShower"></apps>
  </div>
  <template id="tpl">
    <div>
      <h1 v-for="item in list" @click="Isdatas(item)"></h1>
    </div>
  </template>
 </body>
 <script src="../../../JavaScript/vue.js"></script>
 <script>
  const vue=new Vue({
    el:"#app",
    methods: {
      isShower(item){
        console.log(item);
      }
    },
    components:{
      'apps':{
        template:"#tpl",
        data(){
          return {
            list:['内容1','内容2','内容3','内容4']
          }
        },
        methods: {
          Isdatas(item){
            this.$emit('contents', item)
          }
        },
      }
    }
  })
 </script>
 </html>