自定义组件创建与使用

创建

在根目录下，新建components目录（名称随意） 在components目录下，新建组件i-farame.vue

<template>
    <view>
        <view class="black">本功能开发中……</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style scoped>
    .black{
        background-color: #000;
        opacity: 0.9;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        z-index: 10;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

使用

1、引入

打开要引入组件的vue界面，在script中引入

<script>
	import IFrame from "@/components/i-frame.vue";
	……

2、注册组件

<script>
	import IFrame from "@/components/i-frame.vue";
	export default {
		components: {
			IFrame
		},
		……

3、使用

<template>
	<view>
		<i-frame :shishi="12112312" :src="xxxxx"></i-frame>
	</view>
</template>

向组件内传入数据

打开i-frame.vue，使用prop接收数据

<script>
	export default {
		props: ["src", "shishi"],
		……

基本使用

<template>
	<view>
		{{shishi}}

	</view>
</template>

在函数里调用

methods: {
	abc () {
		console.log(this.shishi)
	}
}

注意，组件里没有生命周期。