uni-app自定义组件详细代码示例

前言

在uni-app中,我们可以使用Vue的组件语法来自定义组件,其中包括组件的数据、属性、事件以及方法等。自定义组件可以让我们在不同的项目中很方便地重用和修改组件,同时可以提高组件库的扩展性和应用的灵活性。

在uni-app中,我们可以在项目的component目录下存放组件,uni-app只支持vue单文件组件(.vue)。

一、注册

1、全局注册

uni-app 支持配置全局组件,需在 main.js 里进行全局注册,注册后就可在所有页面里使用该组件。

//main.js 里进行全局导入和注册
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)

//index.vue 里可直接使用组件
<template>
	<view>
		<page-head></page-head>
	</view>
</template>

2、局部注册

页面引入组件有两种方式,推荐使用 easycom 方式引入。

1.传统vue规范

在 index.vue 页面中,通过 import 方式引入组件 ,在 components 选项中定义你想要使用的组件。

	<!-- 在index.vue引入 uni-badge 组件-->
	<template>
		<view>
            <!-- 3.使用组件 -->
			<uni-badge text="1"></uni-badge>
		</view>
	</template>
	<script>
        //1.导入组件(这步属于传统vue规范,但在uni-app的easycom下可以省略这步)
		import uniBadge from '@/components/uni-badge/uni-badge.vue';
		export default {
            //2.注册组件(这步属于传统vue规范,但在uni-app的easycom下可以省略这步) 
			components:{uniBadge }
		}
	</script>

2.easycom 方式

将组件引入精简为一步。只要组件安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册,直接在页面中使用。

	<!-- 在index.vue引入 uni-badge 组件-->
	<template>
		<view>
            <!-- 直接使用组件 -->
			<uni-badge text="1"></uni-badge>
		</view>
	</template>
	<script>
		// 这里不用import引入,也不需要在components内注册uni-badge组件。template里就可以直接用
		export default {
			data() {
				return {
				}
			}
		}
	</script>

二、父子组件通信

父子组件之间的通信有两种方式:父传子和子传父。其中,父传子的方式是通过props来实现的,子组件通过props来接收外界传递到组件内部的值。而子传父的方式则是通过$emit触发事件进行传递参数,父组件通过监听这个事件来接收子组件传递过来的数据。

父传子组件的示例代码:

父组件通过props属性将message传递给子组件。子组件则通过props接收这个值并在模板中显示出来。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent!',
    };
  },
};
</script>


<!-- 子组件 -->
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

子传父组件的示例代码:

子组件通过$emit触发了一个名为childEvent的事件,并将数据作为参数传递给父组件。父组件则通过监听这个事件来接收子组件传递过来的数据,并在handleChildEvent方法中进行处理。

<!-- 父组件 -->
<template>
  <div>
    <child-component @childEvent="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child component:', data);
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendDataToParent">Send data to parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = 'Hello from child!';
      this.$emit('childEvent', data);
    },
  },
};
</script>

三、uni.$on与uni.$emit

uni.$on是uni-app中的一个全局事件监听方法,用于在页面或组件外部监听指定事件的触发。当事件被触发时,会执行传入的回调函数。使用uni.$on方法可以避免在每个页面或组件中都手动注册和注销事件监听器的问题,提高了代码的复用性和可维护性。

uni.$emit是一个全局事件触发器,用于向父组件或全局事件触发器发送事件。

示例代码:

//子组件触发自定义事件
<template>
  <div>
    <button @click="sendDataToParent">Send data to parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = 'Hello from child!';
      uni.$emit('childEvent', data); // 触发自定义事件
    },
  },
};
</script>

// 在父组件中监听子组件触发的自定义事件
export default {
  onLoad() {
    uni.$on('childEvent', this.handleChildEvent); // 注册事件监听器
  },
  beforeDestroy() {
    uni.$off('childEvent', this.handleChildEvent); // 注销事件监听器
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child component:', data);
    },
  },
};

四、slot插槽

插槽是一种用于向子组件传递内容的方式。插槽实质是对子组件的扩展,父组件通过slot插槽向子组件内部指定位置传递内容。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。

插槽的示例代码:

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot> <!-- 使用具名插槽 -->
    <slot></slot> <!-- 使用默认插槽 -->
    <slot name="footer"></slot> <!-- 使用具名插槽 -->
  </div>
</template>

<script>
export default {};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <template v-slot:header>
        <h2>组件的头部</h2>
      </template>
      <p>组件的内容。</p>
      <template v-slot:footer>
        <button @click="handleClick">点击我</button>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
};
</script>

五、ref

被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。在非H5端,只能用于获取自定义组件实例,不能用于获取内置组件实例(如:view、text)。

<!-- 非H5端不支持通过this.$refs.content来获取view实例 -->
<view ref="content">hello</view>

<!-- 支持通过this.$refs.child来获取child-component实例 -->
<child-component ref="child"></child-component>

代码示例:

<!-- base-input子组件页面 -->
<template>
	<view>
		<input :focus="isFocus" type="text" placeholder="请输入内容" />
	</view>
</template>
<script>
	export default {
		name:"base-input",
		data() {
			return {
				"isFocus":false
			};
		},
		methods:{
			focus(){
				this.isFocus = true
			}
		}
	}
</script>

<!-- index 父组件页面 -->
<template>
	<view>
		<base-input ref="usernameInput"></base-input>
		<button type="default" @click="getFocus">获取焦点</button> 
	</view>
</template>
<script>
	export default {
		methods:{
			getFocus(){
				//通过组件定义的ref调用focus方法
				this.$refs.usernameInput.focus()
			}
		}
	}
</script>

总结

到此这篇关于uni-app自定义组件的文章就介绍到这了,更多相关uni-app自定义组件内容请搜索代码部落以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码部落!

本文章来源于网络，作者是：TIGA|迪迦，由代码部落进行采编，如涉及侵权请联系删除！转载请注明出处：https://daimabuluo.cc/JavaScript/1926.html