//main.js 里進行全局導(dǎo)入和注冊
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.導(dǎo)入組件（這步屬于傳統(tǒng)vue規(guī)范，但在uni-app的easycom下可以省略這步）
		import uniBadge from '@/components/uni-badge/uni-badge.vue';
		export default {
            //2.注冊組件（這步屬于傳統(tǒng)vue規(guī)范，但在uni-app的easycom下可以省略這步） 
			components:{uniBadge }
		}
	</script>

	<!-- 在index.vue引入 uni-badge 組件-->
	<template>
		<view>
            <!-- 直接使用組件 -->
			<uni-badge text="1"></uni-badge>
		</view>
	</template>
	<script>
		// 這里不用import引入，也不需要在components內(nèi)注冊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>

//子組件觸發(fā)自定義事件
<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); // 觸發(fā)自定義事件
    },
  },
};
</script>

// 在父組件中監(jiān)聽子組件觸發(fā)的自定義事件
export default {
  onLoad() {
    uni.$on('childEvent', this.handleChildEvent); // 注冊事件監(jiān)聽器
  },
  beforeDestroy() {
    uni.$off('childEvent', this.handleChildEvent); // 注銷事件監(jiān)聽器
  },
  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>組件的內(nèi)容。</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="請輸入內(nèi)容" />
	</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調(diào)用focus方法
				this.$refs.usernameInput.focus()
			}
		}
	}
</script>