vue组件知识点
原创
无纤尘
一、定义一个组件，一般放在项目的components文件夹内
<template>
<div class="container">
这是一个组件
</div>
</template>
<script>
</script>二、在父模板使用组件
1、通过import导入该组件
2、在通过选项components注册该组件。
3、DOM不区分大小写。当组件名称采用大小写kebabCase命名的时候，需要转换为相应等价的 kebab-case (短横线连字符) 形式
<template>
<div class="container">
<Test></Test>
</div>
</template>
<script>
import Test from '@/components/Test' //导入该组件
export default {
components:{
Test //注测组件
},
}
</script>三、porps传递(结合例子)
在子组件中
1、用porps声明注册后的count,将成为组件实例的属性。
<template>
<div class="container">
{{count}}
</div>
</template>
<script>
export default{
props:['count'], // 用porps声明注册后的`count`
}
</script>
在父组件中
<template>
<div class="container">
<Test :count="num"></Test> <!--成为组件实例的属性-->
</div>
</template>
<script>
import Test from '@/components/Test'
export default {
data(){
return{
num:0,
}
},
components:{
Test
},
}
</script>
<style>
</style>注册后的count可以在组件中用this直接访问。用法类似于data的返回值。
四、监听子组件事件
在子组件中
1、通过$emit，将子组件事件抛给父模板（父组件）
<template>
<div class="container">
{{count}}
<button @click="$emit('addCount')">累加</button> <!--addCount就是被抛出的事件，-->
</div>
</template>
<script>
export default{
props:['count'],
emits:['addCount'], //注册组件事件，可不写
data(){
return{
content:this.count
}
},
mounted() {
console.log(this.count)
}
}
</script>
<style>
</style><template>
<div class="container">
<Test :count="num" @add-count="num++"></Test>
num:{{num}}
</div>
</template>
<script>
import Test from '@/components/Test'
export default {
data(){
return{
num:0,
}
},
methods:{
},
components:{
Test
},
}
</script>
<style>
</style>五、设置插槽slot
一般情况下像<div>xxx</div>可以直接向div组件传递xxx内容。在自定义组件中我们可以使用slot插槽
在子组件中
1、写个slot标签作为占位符，父组件传递进来的内容就会渲染在这里
<template>
<div class="container">
...
<slot></slot> <!--slot就是插槽，-->
</div>
</template>在父组件中
<template>
<div class="container">
<Test :count="num" @addCount="num++">
这是一个插值
</Test>
</div>
</template>版权协议须知！
本篇文章来源于 无纤尘 ，如本文章侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
586 0 2022-09-15
