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

//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>

	<!-- 在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>

	<!-- 在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>

<!-- 父组件 -->
<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>

<!-- 父组件 -->
<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>

//子组件触发自定义事件
<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);
    },
  },
};

<!-- 子组件 -->
<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>

<!-- 非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>