todo-list 我的練習

總結：

a:父組件向子組件傳值  用  props

b:子組件向父組件傳值  用 this.$emit('handle'，arg)

部分頁面代碼：

一、app.vue代碼

<template>
	<div id="app">
		<img src="./assets/logo.png">
		<div class="box">
			<input type="text" v-model="inputvalue" @keydown.13="insertInput" placeholder="請輸入待辦事項">
			<button @click="insertInput">提交</button>
		</div>
		<ul class="todolist">
			<todo-item v-for="(item,index) of list" :key="index" :index="index" :content="item" @deleteitem="deleteItem">{{ item }}</todo-item>
		</ul>

	</div>
</template>
<script>
	import HelloWorld from './components/HelloWorld'

	export default {
		components: {
			'todo-item': HelloWorld,
			'car':car
		},
		data: function() {
			return {
				inputvalue: '', //數據綁定
				list: []        //數據列表
			}
		},
		methods: {
			insertInput: function() {
				if (this.inputvalue) {
					this.list.push(this.inputvalue);
					this.inputvalue = '';
				}
			},
			deleteItem: function(index) {
				this.list.splice(index, 1);
			}
		}
	}
</script>

<style>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* text-align: center; */
		color: #2c3e50;
		/* margin-top: 60px; */
	}

	.box {
		display: flex;
		flex-direction: row;
	}

	.todolist {
		list-style: none;
		padding: 0;
		margin: 0;
		padding-top: 30px;
		width: 300px;
	}
</style>

 二、helloWorld.vue代碼

<template>
    <li  @click="deletehandle">{{content}}</li>
</template>

<script>
export default {
  props:['content','index'],
	methods:{
		deletehandle:function(){
			this.$emit('deleteitem',this.index)
		}
	}
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  /* display: inline-block; */
  margin: 0 10px;
	/* text-align: left; */
}
a {
  color: #42b983;
}
</style>