老师你好，我想问一下关于组件数据传递的问题

来源：1-6 组件概念初探，对 TodoList 进行组件代码拆分

泉白水

2021-04-08

<!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>helloword</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id='root'></div>
</body>
<script>
  const app=Vue.createApp({
    data(){
      return{
        list:[],
        inputvalue:''
      }
    },
    mounted(){
    },
    methods:{
      clickadd(){
        this.list.push(this.inputvalue);
        this.inputvalue='';
      },
      clickdelete(){
        let index = this.list.indexOf(this.inputvalue);
        if(index == -1)return;
        this.list.splice(index,1);
        this.inputvalue='';
      },
    },
    template:`
    <input v-model="inputvalue"/>
    <button v-on:click="clickadd">添加</button>
    <button v-on:click="clickdelete">删除</button>
    <ul>
      <todoitem v-for="(item,index) of list" v-bind:content="item"/>
    </ul>`
  });
  app.component("todoitem",{
    item:["content"],
    template:`<li>{{item}}</li>`//为什么这里写`<li>{{item}}</li>`和`<li>{{content}}</li>`都ok呢？
  });
  app.mount('#root');
</script>
</html>

app.component(“todoitem”,{
item:[“content”],
template:<li>{{item}}</li>//为什么这里写<li>{{item}}</li>和<li>{{content}}</li>都ok呢？
});

写回答

1回答