uni-app组件

一、组件的简单使用

1、组件的定义：在src目录下新建文件夹components用来存放组件，在components目录下直接新建组件*.vue

2、组件的引入：在页面中引入组件“ import 组件名 from ‘组件路径’ ”

3、组件的注册：在页面中的实例中，新增属性components，把组件放进去注册

4、组件的使用：在页面的标签中直接使用引入的组件 “ <组件></组件> ”

//img-border.vue

<template>
	<image class="img-border" src="https://alifei02.cfp.cn/creative/vcg/veer/800water/veer-303310171.jpg"></image>
</template>

<script>
	export default {
		
	}
</script>

<style>
.img-border{
    border-radius: 15%;
}
</style>


//index.vue

<template>
	<view class="content">
		<!-- 4 使用组件 -->
		<imgBorder></imgBorder>
		<img-border></img-border>
	</view>
</template>

<script>
	//2 引入自定义组件
	import imgBorder from "@/components/img-border";
	export default {
	//3 注册组件
	components:{
		imgBorder:imgBorder
	}
	}
</script>

<style>

</style>

二、组件传递参数

1、父向子传递数据

父页面向子组件ul-com通过属性名list传递了一个数组数据，子组件通过props进行接收数据 

//img-border.vue


<template>
<!-- 把propos中的src看成是data中的变量一样来使用 -->
	<image class="img-border" :src="src"></image>
</template>

<script>
	export default {
		// 声明一下要接受的父组件传递过来的属性
        props:{
            src:String
        }
	}
</script>

<style>
.img-border{
    border-radius: 5%;
}
</style>

//index.vue

<template>
	<view class="content">
		<!-- 4 使用组件 -->
		<img-border :src="src1"></img-border>
		<img-border :src="src2"></img-border>
	</view>
</template>

<script>
	//2 引入自定义组件
	import imgBorder from "@/components/img-border";
	export default {
		data(){
			return{
			src1:"https://alifei02.cfp.cn/creative/vcg/veer/800water/veer-300702391.jpg",
			src2:"https://alifei02.cfp.cn/creative/vcg/veer/800water/veer-311878121.jpg"
			}
		},

	//3 注册组件
	components:{
		imgBorder:imgBorder
	}
	}
</script>

 2、子组件向父组件传递数据

子组件通过触发事件的方式向父组件传递数据，父组件通过监听事件的方式来接收数据

//index.vue


<template>
	<view class="content">
		<!-- 4 使用组件 -->
		<img-border @srcChange="handleSrcChange" :src="src1"></img-border>
		<img-border @srcChange="handleSrcChange" :src="src2"></img-border>
		<view>图片地址：\n{{src}}</view>
	</view>
</template>

<script>
	//2 引入自定义组件
	import imgBorder from "@/components/img-border";
	export default {
		data(){
			return{
				src:"",
				src1:"https://alifei02.cfp.cn/creative/vcg/veer/800water/veer-300702391.jpg",
				src2:"https://alifei02.cfp.cn/creative/vcg/veer/800water/veer-311878121.jpg"
			}
		},

	//3 注册组件
		components:{
			imgBorder:imgBorder
		},

		methods:{
			handleSrcChange(e){
				console.log("成功啦！！！！！！！！！");
				console.log(e);
				this.src=e;
			}
		}
	}
</script>

//img-border.vue


<template>
<!-- 把propos中的src看成是data中的变量一样来使用 -->
	<image @click="handleClick" class="img-border" :src="src"></image>
</template>

<script>
	export default {
		// 声明一下要接受的父组件传递过来的属性
        props:{
            src:String
        },
        methods:{
            handleClick(){
                //console.log("我来啦!!!!!!!!!!!!");
                //子向父传递数据通过触发事件
                //this.$emit("自定义的事件名称",要传递的参数);
                this.$emit("srcChange",this.src);
            }
        }
	}
</script>

<style>
.img-border{
    border-radius: 5%;
}
</style>

组件中定义一个触发事件@handleClick,然后通过this.$emit("srcChange",this.src);触发自定义事件srcChange同时把数据传递过去，在父组件中监听自定义事件srcChange，触发事件回调handleSrcChange，通过形参e来接收数据。

3、全局共享数据

        1、通过Vue的原型共享数据

//main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 定义全局数据 通过vue的原型来实现
Vue.prototype.baseurl="www.baidu.com";

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

//index.vue

<script>
	export default {
		data(){
		},

		components:{

		},

		methods:{

		},

		//onLoad 页面加载完毕就会触发 生命周期
		onLoad(){
			console.log(this.baseurl);
			
		}
	};
</script>

        2、通过globaldata共享数据

//App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},

		globalData:{
			base:"www.360.com"
		}
	}
</script>

//index.vue

<template>
	<view class="content">

	</view>
</template>

<script>

	export default {
		data(){

		},

		components:{

		},

		methods:{

		},
		//onLoad 页面加载完毕就会触发 生命周期
		onLoad(){
			// 获取globaldata
			console.log(getApp().globalData.base);
		}
	};
</script>

<style>

</style>

三、组件插槽

组件插槽可以实现动态的给子组件传递标签，通过slot来实现占位符

//my-form.vue

<template>
	<view class="form">
        //标题是固定不变的
        <view class="form_title">标题</view>
       
        <view class="form_content">
            //变化的内容用slot占个位子
            <slot></slot>
        </view>
	</view>
</template>

<script>
	export default {

	};
</script>

<style>

</style>

//index.vue

<template>
	<view class="content">
	<my-form>
        //放入要传递的标签
		<input type="text">
		<radio></radio>
		<checkbox></checkbox>
	</my-form>
	</view>
</template>

<script>
import myForm from "@/components/my-form";

	export default {
		components:{
			myForm
		}

	};
</script>

<style>

</style>