仅附一个vue传值小练习
时间:2022-06-26
本文章向大家介绍仅附一个vue传值小练习,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这是一个普通的兄弟间传值小练习,将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行
- 在Linux Mint上安装node.js和npm
- JS魔法堂:再识Number type
- (cljs/run-at (JSVM. :browser) "搭建刚好可用的开发环境!")
- (cljs/run-at (->JSVM :browser) "语言基础")
- 微博爬虫
- 电话域名受欢迎,微语言融资3000万
- 前端魔法堂——异常不仅仅是try/catch
- (cljs/run-at (JSVM. :all) "一起实现柯里化")
- (cljs/run-at (JSVM. :browser) "简单类型可不简单啊~")
- 前端魔法堂:解秘FOUC
- JS魔法堂:深究JS异步编程模型
- 前端魔法堂:屏蔽Backspace导致页面回退
- “表情包”火爆全球,域名emojis.com小六位易主
- 前端魔法堂:onsubmit和submit事件处理函数怎么不生效呢?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【go】剑指offer:3种方法寻找二进制1的个数
- 高并发技术
- Working with Errors in Go 1.13
- Hadoop技术(二)资源管理器YARN和分布式计算框架MapReduce
- CDH——Cloudera’s Distribution Including Apache Hadoop
- 【go】剑指offer:用26个英文字母组合表示列数
- Flink——运行在数据流上的有状态计算框架和处理引擎
- goland破解教程
- HTTP接口设计
- NSQ分布式消息基础入门
- 【golang】剑指offer 最大n位数
- Spark提交Jar任务警告: Initial job has not accepted any resources;
- Defer,Panic,and Recover
- Spark——底层操作RDD,基于内存处理数据的计算引擎
- Go 项目最佳实践