Vue中的组件详谈
一、组件的注册
组件注册需要注意的有五点：
1、data要写成函数，并且用return返回一个值，这样不同的调用才能互不影响
2、template后面跟的是飘号，就是Tab上面那个键
3、template后面的内容要写在一个大的div里面，不要分开多个div
4、props后面的是数组，因为有很多个prop
5、要保存成js文件
Vue.component("myson",{
data(){
return{
sonmsg:"hello son"
}
},
template:`
<div>
<p>子组件内容</p>
prop接收到的值：{{sonprop}}
</div>
`,
props:["sonprop"],
methods:{
sonclick(){
this.$emit("sonemit",this.sonmsg)
}
}
})
二、组件的使用
使用时只要注意一点就好，要先引用vue，再引用子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="00-组件-子.js"></script>
</head>
<body>
<div id="app">
<myson></myson>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
parentmsg:"parentmsg to sonprop"
}
})
</script>
</body>
</html>
三、父传子
父传子比较简单，分成两步
1、在组件里定义prop
props:["sonprop"]
2、使用组件时，用定义的prop绑定父的值
<myson :sonprop="parentmsg"></myson>
父里面的值是这样的
data:{
parentmsg:"parentmsg to sonprop"
}
详细传递过程是这样的，看起来比较复杂，其实就上面说的两步
四、子传父
子组件给父传数值要通过方法来传递，父和子各定义一个方法，然后用一个中间方法来连接，记住这个中间方法的使用就行了，步骤详细分解开挺多的
1、在子组件的template的button里使用一个点击事件
<button @click="sonclick">按钮</button>
2、在子组件里定义上面使用的方法，触发一个中间方法并传递数据
sonclick(){
this.$emit("sonemit",this.sonmsg)
}
3、父使用子组件时，用中间方法绑定自己的方法
<myson @sonemit="parentclick"></myson>
4、在父的方法里接收数据，这里p可以写成任意字符
parentclick(p){
vm.parentmsg=p;
}
详细代码图
运行效果
五、插槽
1、加入插槽，插槽就是在组件里留一个空位，使用组件时可以插入任意东西
在子组件某个位置定义：<slot></slot>
使用组件时就可以在该位置添加任意标签
2、加入多个插槽时，要为每个插槽命名，使用时每个slot要放在一个template里面
定义多个插槽
template:`
<div>
<p>子组件内容:{{sonmsg}}</p>
<p>分隔线111111111111111</p>
<slot name="a1"></slot>
<p>分隔线2222222</p>
<slot name="a2"></slot>
<p>分隔线333333333</p>
</div>
`,
使用多个插槽，一个template放一个slot
<template slot="a1">
<button>按钮a1</button>
</template>
<template slot="a2">
<button>按钮a2</button>
</template>
六、子组件给插槽传值
1、在子组件template里定义中间数据emitmsg，名字可以随便
<slot name="a1" :emitmsg="sonmsg"></slot>
2、在父组件里用res接收，不管是多少个子组件，都是用res接收，res是结果集，如果有多个slot的话，数据都会在里面
<template slot="a1" slot-scope="res">
{{res.emitmsg}}
</template>
代码展示
显示效果：
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！
相关文章
这篇文章主要给大家介绍了关于如何优雅的处理vue项目异常的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
vite打包出现"default" is not exported by "no
这篇文章主要给大家介绍了关于vite打包出现"default" is not exported by "node_modules/...问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue.js 无限滚动列表性能优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家介绍了使用antv替代Echarts实现数据可视化图表详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
element ui的el-input-number修改数值失效的问题及解决
这篇文章主要介绍了element ui的el-input-number修改数值失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本文介绍了在Vue.js项目中常用的6种数据加密方式,包括Base64编码、MD5哈希、SHA-256哈希、AES加密、RSA加密和使用WebCryptoAPI,每种加密方式都有其优缺点,适用于不同的场景,感兴趣的可以了解一下2024-10-10
vue-cil之axios的二次封装与proxy反向代理使用说明
这篇文章主要介绍了vue-cil之axios的二次封装与proxy反向代理使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue实现经典选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue项目实现添加图片裁剪组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要给大家介绍了关于Vue中$refs的探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
最新评论