VUE组件相关总结！
2024-03-09 14:53:48
定义使用一个组件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
<title>Document</title>
</head>
<body>
<!--定义组件-->
<template id="acc">
<div>
{{msg}}
<h3>账号</h3>
<h3>密码</h3>
<button @click="login">登录</button>
</div>
</template>
<!--使用组件-->
<div id="app">
<acc1></acc1>
</div> <script type="text/javascript">
// 注册组件
Vue.component('acc1',{
template:'#acc',
// 组件的数据
data:function(){
return{
msg:"hello"
}
},
// 组件的方法
methods:{
login:function(){
console.log("执行登录");
}
}
});
new Vue({
// 管理边界
el:'#app',
// 数据
data(){
return { }
},
// 方法
methods:{ }
})
</script>
</body>
</html>
父组件传值到子组件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
<title>父组件传值给子组件</title>
</head>
<body>
<!--定义组件-->
<template id="acc">
<div>
<h1>组件:{{name1}}</h1>
</div>
</template>
<!--使用组件-->
<div id="app">
<acc1 :name1="name"></acc1>
</div> <script type="text/javascript">
// 注册组件
Vue.component('acc1',{
template:'#acc',
// 接收数据
props:{
name1:String //文本用String 数字用Number
} });
new Vue({
// 管理边界
el:'#app',
// 数据
data(){
return {
name:"小明"
}
},
// 方法
methods:{ }
})
</script>
</body>
</html>
子组件传值到父组件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>
<title>子组件传值给父组件</title>
</head>
<body>
<!--定义组件-->
<template id="acc">
<div>
<h1 @click="sendData">发送数据</h1>
</div>
</template>
<!--使用组件-->
<div id="app">
<acc1 v-on:send="getData"></acc1>
</div> <script type="text/javascript">
// 注册组件
Vue.component('acc1',{
template:'#acc',
methods:{
sendData(input){
this.$emit('send',);
}
} });
new Vue({
// 管理边界
el:'#app',
// 数据
data(){
return { }
},
methods:{
getData(input){
console.log(input);
}
}
})
</script>
</body>
</html>
最新文章
- layer.open打开iframe页面的调用父页面方法及关闭
- 《大道至简》之第一章：编程的精义读后感（JAVA伪代码）
- office2013不能正常使用
- svn的merge使用例子
- Xcode - 必不可少的插件
- How to Read, Write XLSX File in Java - Apach POI Example---reference
- mysql事件调度器
- Tengine中的proxy_upstream_tries
- Python3.4 + Django1.7.7 搭建简单的表单并提交
- Introducing Outflux: a smart way out of InfluxDB
- PEM证书加密方法（python）
- flask中邮件发送方法
- 团队作业7——第二次项目冲刺（Beta版本）day3
- 【转】Openstack中oslo_config模块学习
- Ubuntu_安装Wiz笔记
- centos LAMP第三部分php,mysql配置 php配置文件 配置php的error_log 配置php的open_basedir 安装php的扩展模块 phpize mysql配置第二十一节课
- Drupal8 Console 命令行工具
- [network]数字签名
- 在MFC中显示cmd命令行
- cocos2d-x onMouseMove中CCTouch *pTouch参数的细节