这是一个普通的兄弟间传值小练习,将inputs组件里输入的人员数据传入到它的兄弟组件addinfo里去,并添加删除功能.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习--信息添加</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<inputs></inputs>
<addinfo></addinfo>
</div>
<template id="inputs">
<fieldset>
<legend><h3>信息添加</h3></legend>
<span>姓名</span>: <input type="text" v-model="name" value="name"><br>
<span>性别</span>: <input type="text" v-model="sex" value="sex"><br>
<span>年龄</span>: <input type="text" v-model="age" value="age"><br>
<button @click="sendinfo">添加</button>
</fieldset>
</template>
<template id="addinfo">
<fieldset>
<legend><h3>信息展示</h3></legend>
<ul>
<li v-for="(v,i) in person1">
<span>姓名: {{v.name}}</span>
<span>性别: {{v.sex}}</span>
<span>年龄: {{v.age}}</span>
<button @click="deleteInfo(i)">删除</button>
</li>
</ul>
</fieldset>
</template>
<script type="text/javascript">
let totalVue = new Vue();
let inputs = {
template:'#inputs',
data(){
return {
name:'',
sex:'',
age:'',
input:[]
}
},
methods: {
sendinfo(){
let inputs={name:this.name,sex:this.sex,age:this.age};
this.input.push(inputs);
totalVue.$emit("inputs-event",this.input);
}
}
};
let addinfo = {
template:'#addinfo',
created(){
totalVue.$on("inputs-event",this.getinputVal)
},
data(){
return {
person1:''
}
},
methods:{
getinputVal(data){
console.log(data);
this.person1=data
},
deleteInfo(index){
this.person1.splice(index,1);
}
}
};
let app = new Vue({
el:'#app',
methods:{},
components:{
inputs,
addinfo
}
});
</script>
</body>
</html>
这本是一个小练习,不值得拿出来单独写,但是以这个小练习为例,警醒自己注意关于双向绑定的一个小问题.
inputs组件里data返回的数据如果直接放进对象里会出现数据双向改变的问题,应该将拿到的数据以对象的形式添加到定义的input数组里面去,再进行数据的传递,详见51-53行