组件基础—Vue学习笔记
2024-08-22 10:57:34
ammm学习Vue有好几天了，今天遇到难点所以打算写一点随笔加深印象。
一、首先最简单的创建组件
1全局组件 Vue.component()
Vue.component('hello',{
template:'<h1>hello world<h1>'
})
然后就可以调用了，前提：你需要先设置Vue的接管范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="vm">
<hello></hello>
</div>
</body>
<script>
Vue.component('hello',{
template:'<h1>hello world<h1>'
}) new Vue({
el:'#vm'
})
</script>
</html>
2. 局部组件
先在外部声明，然后在Vue实例中实例化
var hello={
template:'<h1>hello world</h1>'
}
var app=new Vue({
el:'#app',
components:{
hello:hello //在此处生成局部组件两个hello可以不同
}
})
二、组件传值
1.父组件向子组件传值
最简单的方法通过 <slot></slot>传值
<hello></hello>里面的hiboy会传递到子组件中替代slot
<body>
<div id="app">
<hello>hiboy</hello>
</div>
</body>
<script>
Vue.component('hello',{
template:'<h1><slot></slot></h1>'
})
var app=new Vue({
el:'#app'
})
</script>
常规方法通过props传值
<body>
<div id="app">
<hello message="hi boy"></hello>
</div>
</body>
<script>
Vue.component('hello',{
props:['message'],//此处的值和dom里的值对应
template:'<h1>{{message}}</h1>'//通过插值表达绑定数据
})
var app=new Vue({
el:'#app'
})
</script>
当然我们可能会遇到像这样的Bug
（当你在一个表格中使用组件时会发现...）
<body>
<div id="app">
<table>
<tbody>
<hello></hello>
<hello></hello>
</tbody>
</table>
</div>
</body>
<script>
Vue.component('hello',{
template:'<tr>Hi boy</tr>'//通过插值表达绑定数据
})
var app=new Vue({
el:'#app'
})
</script>
我们想要在表格的tbody中插入两个组件，组件为tr但是仔细看一下运行后的Dom
我们会发现插入的两个组件并没有在我们预想的tbody中（疑惑...）
解决方法：采用 is 声明
<body>
<div id="app">
<table>
<tbody>
<tr is="hello"></tr>//采用is把tr转化为hell组件
<hello></hello>
</tbody>
</table>
</div>
</body>
<script>
Vue.component('hello',{
template:'<tr>Hi boy</tr>'//通过插值表达绑定数据
})
var app=new Vue({
el:'#app'
})
</script>
看一下运行结果吧！
类似于以上情况的标签有 table、select、ul、ol
2.子组件向父组件传值
子组件向父组件传值主要通过向上层传递事件实现所需函数$emit(’事件名‘，值)//值可为空也可多个
<body>
<div id="app">
<hello @addnum="handleAddClick"></hello><!-- 接收子节点传过来的值 -->
<h3>{{num}}</h3>
</div>
</body>
<script>
Vue.component('hello',{
data:function(){ //组件的data为一个函数
return{
number:0
}
},
template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
methods:{
handleClick:function(){
//这里点击一次我们让自身加一
this.number++;
//向上传递事件给父节点
this.$emit('addnum',1);//第一个参数为事件名，第二个为所需要传的值，这里我们传1，当然可以传多个值
}
}
})
var app=new Vue({
el:'#app',
data:{
num:0
},
methods:{
handleAddClick:function(step){
this.num+=step;
}
}
})
</script>
注意：组件的data是一个函数通过返回值来实现
接下来我们通过两个子组件的值计算出父组件的值。此时我们会引入一个新的东西 ref 它可以让我们获取所需dom
<body>
<div id="app">
<hello @addnum="handleAddClick" ref="one"></hello><!-- 接收子节点传过来的值 -->
<hello @addnum="handleAddClick" ref="two"></hello>
<h3>{{num}}</h3>
</div>
</body>
<script>
Vue.component('hello',{
data:function(){ //组件的data为一个函数
return{
number:0
}
},
template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
methods:{
handleClick:function(){
//这里点击一次我们让自身加一
this.number++;
//向上传递事件给父节点
this.$emit('addnum');
}
}
})
var app=new Vue({
el:'#app',
data:{
num:0
},
methods:{
handleAddClick:function(){
this.num=this.$refs.one.number+this.$refs.two.number;
}
}
})
</script>
通过this.$refs.one我们可以获得ref="one"的组件以及其内的所以内容，
this.$refs.one.number获取了组件中的number
Ok就是这样，至于最基础的模板语法就自己看官方文档吧。
最新文章
- asp.net页面生命周期
- Android 子线程测试
- 常见算法是js实现汇总（转载）
- 《C++标准库》
- 爬取知乎百万信息之UrlTask
- 基于三星I9250演示自己弄的Miracast功能-手机对手机
- Web基础知识和技术
- gdb分析core文件
- xml 解析参考文档
- 一文说尽MySQL事务及ACID特性的实现原理
- 如何在mpvue下收集小程序的formId
- 怎么样使用CLion调试分析MySQL Server
- Android手机特殊软件配置
- mongodb认识
- ----这是一个register code----
- navicat连接mysql时出现2003（10060）错误
- BZOJ3876 AHOI/JSOI2014支线剧情（上下界网络流）
- HDU4403-模拟、数学
- P1096（简单dp）
- AngularJS入门基础——过滤器