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>

版权协议须知!

本篇文章来源于 无纤尘 ,如本文章侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意

none

61 0 2022-09-15


分享:
icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif
  • 默认
  • 护眼
  • 夜晚
  • 壁纸
  • 默认