04 vue - 单文件组件定义与使用

系列文章导航

01 Vue语法基础

02 vue数据绑定与指令

03 vue组件技术

04 vue单文件组件定义与使用

---

1 单文件组件的好处

2 单文件组件的运行场景hbuilderx工具

一下两种方式创建的项目才允许使用单文件组件：

1）方式1：Vue项目(含vue-cli)

2）方式2：uni-app项目

 

3 组件的定义与使用

3.1 组件的定义语法规范

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<template> 　　组件模板内容 </template> <script> export default {     name: "组件名称",     //组件内部数据     data(){       return{ 　　　 　　变量名:变量值 　　　　} 　　 },     //组件对外公开属性     props: {         属性名称: {             type: String,//属性类型             value: "值"         },         ......     },     //组件生命周期     created:function(e){           },     //组件内部方法     methods: {     test(){                   }     } } </script> <style> 组件样式 </style>

3.2 组件的使用语法规范

1、引用依赖的组件
import 组件名称 from "../../components/组件名.vue";
2、导出本组件时声明依赖的组件
export default{
    components:{
        组件名称
    },
}
3、在试图模板中使用组件
<组件名称 组件属性="对应的值"></组件名称>

4 vue项目单文件组件代码实例

4.1  文件结构

4.2 组件定义myComponent.vue

<template>
    <!-- 组件模板内容 -->
    <div>
        <slot name="begin" v-bind:cValue="cValue" :user="user">begin默认内容</slot><button>子组件<slot>center默认内容</slot></button>
        <slot name="end">end默认内容</slot>
    </div>
</template>

<script>
    export default {
        // 组件名称
        name: "myComponent",
        // 组件数据
        data: function() {
            return {
                cValue: "内部变量",
                user:{
                    firstName:'wang',
                    lastName:'zhirui'
                }
            }
        },
        props:[],
        //组件生命周期
        created: function(e) {

        },
        //组件内部方法
        methods: {

        }
    }
</script>

<style>
</style>

 

4.3 组件使用app.vue

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
        <br />
        <!-- 使用组件时 绑定组件对外公开的事件的事件处理方法-->
        <my-component><template v-slot="begin">父给begin的内容{{pValue}}}</template>默认填充内容</my-component>
        <br>
        <!-- 通过v-slot:插糟名="公开分享数据的引用变量名" -->
        <my-component><template v-slot:[cname]="slotProps">{{slotProps.cValue}}-{{slotProps.user.firstName}}</template></my-component>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    import myComponent from '@/components/myComponent.vue'
    export default {
        name: 'app',
        data() {
            return {
                title: 'Hello',
                pValue: "外部变量",
                cname: "begin"
            }
        },
        components: {
            HelloWorld,
            myComponent
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

 

4.4 运行效果

5 uni-app单文件组件代码实例

5.1 文件结构

5.2 组件定义myComponent.vue

<template>
    <!-- 组件模板内容，单个外层标记 -->
    <div>
        <slot name="begin" v-bind:cValue="cValue" :user="user">begin默认内容</slot><button>子组件<slot>center默认内容</slot></button>
        <slot name="end">end默认内容</slot>
    </div>
</template>
<script>
    export default {
        // 组件名称
        name: "myComponent",
        // 组件数据
        data() {
            return {
                cValue: "内部变量",
                user:{
                    firstName:'wang',
                    lastName:'zhirui'
                }
            }
        },
        props:[],
        //组件生命周期
        created: function(e) {

        },
        //组件内部方法
        methods: {

        }
    }
</script>
<style>
</style>

5.3 组件的使用index.vue

<template>
    <view class="content">
        <!-- 使用组件时 绑定组件对外公开的事件的事件处理方法-->
        <my-component><template v-slot="begin">父给begin的内容{{pValue}}}</template>默认填充内容</my-component>
        <br>
        <!-- 通过v-slot:插糟名="公开分享数据的引用变量名" -->
        <my-component><template v-slot:[cname]="slotProps">{{slotProps.cValue}}-{{slotProps.user.firstName}}</template></my-component>
    </view>
</template>
<script>
    // 引入组件
    import myComponent from '@/components/myComponent.vue'
    export default {
        data() {
            return {
                title: 'Hello',
                pValue:"外部变量",
                cname:"begin"
            }
        },
        // 定义可以使用的组件
        components: {
            myComponent
        },
        // uni-app 页面生命周期函数
        onLoad() {

        },
        // 页面方法
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

</style> 

5.4 运行效果

 

 

---

欢迎阅读，有错误请留言指正。