<body>
<script src="../libs/vue.js"></script>
<div id="app">
? ? <com2
? ? ? ? ? ? @add="addItem"></com2>
? ? <!--父組件往子組件數(shù)據(jù)傳遞-->
? ? <com1
? ? ? ? ? ? :array="lists"
? ? ? ? ? ? @delete="deleteIndex"></com1>
</div>
<template id="temp">
? ? <div>
? ? ? ? <div v-for="(item,index) in array" :key="index">
? ? ? ? ? ? <span class="title" @click="deleteItem(index)">{{item.title}}</span>
? ? ? ? ? ? <br>
? ? ? ? ? ? <span class="desc">{{item.desc}}</span>
? ? ? ? ? ? <div class="line"></div>
? ? ? ? </div>
? ? </div>
</template>
<template id="temp2">
? ? <div>
? ? ? ? <input type="text" v-model="title">
? ? ? ? <input type="text" v-model="desc">
? ? ? ? <button style="width: 80px; height: 30px" @click="submit">提交</button>
? ? </div>
</template>
<script>
? ? /*全局組件，用來顯示數(shù)組里的數(shù)據(jù)*/
? ? Vue.component('com1', {
? ? ? ? template: '#temp',
? ? ? ? props: {
? ? ? ? ? ? /*用于接收父組件傳來的數(shù)據(jù)*/
? ? ? ? ? ? array: Array,
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? deleteItem(index) {
? ? ? ? ? ? ? ? //點(diǎn)擊標(biāo)題刪除item
? ? ? ? ? ? ? ? this.$emit('delete', index)
? ? ? ? ? ? }
? ? ? ? }
? ? })
? ? /*全局組件，用來顯示輸入的key和value*/
? ? Vue.component('com2', {
? ? ? ? template: '#temp2',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? title: '',
? ? ? ? ? ? ? ? desc: ''
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? submit() {
? ? ? ? ? ? ? ? //提交按鈕的事件
? ? ? ? ? ? ? ? var data = {
? ? ? ? ? ? ? ? ? ? title: this.title,
? ? ? ? ? ? ? ? ? ? desc: this.desc
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //子組件往父組件發(fā)送數(shù)據(jù)
? ? ? ? ? ? ? ? this.$emit('add', data)
? ? ? ? ? ? }
? ? ? ? }
? ? })
? ? var app = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? message: '',
? ? ? ? ? ? lists: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: '這是標(biāo)題1',
? ? ? ? ? ? ? ? ? ? desc: '這是描述1'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: '這是標(biāo)題2',
? ? ? ? ? ? ? ? ? ? desc: '這是描述2'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: '這是標(biāo)題3',
? ? ? ? ? ? ? ? ? ? desc: '這是描述3'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: '這是標(biāo)題4',
? ? ? ? ? ? ? ? ? ? desc: '這是描述4'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: '這是標(biāo)題5',
? ? ? ? ? ? ? ? ? ? desc: '這是描述5'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? addItem(data) {
? ? ? ? ? ? ? ? //data { title: this.title, desc: this.desc}
? ? ? ? ? ? ? ? this.lists.push(data)
? ? ? ? ? ? },
? ? ? ? ? ? deleteIndex(index) {
? ? ? ? ? ? ? ? //刪除數(shù)據(jù)
? ? ? ? ? ? ? ? this.lists.splice(index, 1)
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
<style>
? ? .title {
? ? ? ? font-size: 20px;
? ? ? ? color: red;
? ? }
? ? .desc {
? ? ? ? font-size: 14px;
? ? ? ? color: black;
? ? }
? ? .line {
? ? ? ? width: 100%;
? ? ? ? height: 1px;
? ? ? ? margin-top: 10px;
? ? ? ? background: #999999;
? ? }
? ? input {
? ? ? ? height: 30px;
? ? }
</style>
