<template>
  <div>
    <h3>父組件</h3>
    <input ref="inputRef" type="text" placeholder="輸入一些文本">
    <button @click="focusInput">聚焦輸入框</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus(); // 獲取DOM元素并聚焦
    }
  }
};
</script>

<template>
  <div>
    <h3>父組件</h3>
    <ul>
      <li v-for="(item, index) in items" :key="index" :ref="getRef(index)">
        {{ item }}
      </li>
    </ul>
    <button @click="highlightFirstItem">高亮第一個(gè)列表項(xiàng)</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['蘋(píng)果', '香蕉', '橙子']
    };
  },
  methods: {
    getRef(index) {
      return index === 0 ? 'firstItem' : null; // 只為第一個(gè)列表項(xiàng)添加ref
    },
    highlightFirstItem() {
      if (this.$refs.firstItem) {
        this.$refs.firstItem[0].style.backgroundColor = 'yellow'; // 高亮第一個(gè)列表項(xiàng)
      }
    }
  }
};
</script>

<template>
  <div>
    <h3>父組件</h3>
    <input v-model="searchText" type="text" placeholder="搜索列表項(xiàng)">
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index" :ref="getRef(item)">
        {{ item }}
      </li>
    </ul>
    <button @click="highlightSelectedItem">高亮選中的列表項(xiàng)</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      items: ['蘋(píng)果', '香蕉', '橙子'],
      selectedItem: '蘋(píng)果'
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.includes(this.searchText));
    }
  },
  methods: {
    getRef(item) {
      return item === this.selectedItem ? 'selectedItemRef' : null; // 根據(jù)選中的項(xiàng)動(dòng)態(tài)添加ref
    },
    highlightSelectedItem() {
      if (this.$refs.selectedItemRef) {
        this.$refs.selectedItemRef[0].style.backgroundColor = 'yellow'; // 高亮選中的列表項(xiàng)
      }
    }
  }
};
</script>

<template>
  <div>
    <h3>父組件</h3>
    <child-component v-for="(item, index) in items" :key="index" :ref="getRef(item)">
      {{ item }}
    </child-component>
    <button @click="callChildMethod">調(diào)用子組件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: ['蘋(píng)果', '香蕉', '橙子'],
      selectedItem: '蘋(píng)果'
    };
  },
  methods: {
    getRef(item) {
      return item === this.selectedItem ? 'selectedChild' : null; // 根據(jù)選中的項(xiàng)動(dòng)態(tài)添加ref
    },
    callChildMethod() {
      if (this.$refs.selectedChild) {
        this.$refs.selectedChild[0].doSomething(); // 調(diào)用子組件的方法
      }
    }
  }
};
</script>

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      console.log('子組件的方法被調(diào)用了');
    }
  }
};
</script>

<template>
  <div>
    <h3>父組件</h3>
    <input v-model="searchText" type="text" placeholder="搜索列表項(xiàng)">
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index" :ref="getRef(item)">
        {{ item }}
      </li>
    </ul>
    <button @click="highlightSelectedItem">高亮選中的列表項(xiàng)</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      items: ['蘋(píng)果', '香蕉', '橙子'],
      selectedItem: '蘋(píng)果'
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.includes(this.searchText));
    }
  },
  methods: {
    getRef(item) {
      return item === this.selectedItem ? 'selectedItemRef' : null; // 根據(jù)選中的項(xiàng)動(dòng)態(tài)添加ref
    },
    highlightSelectedItem() {
      if (this.$refs.selectedItemRef) {
        this.$refs.selectedItemRef[0].style.backgroundColor = 'yellow'; // 高亮選中的列表項(xiàng)
      }
    }
  },
  updated() {
    this.highlightSelectedItem(); // 在組件更新后高亮選中的列表項(xiàng)
  }
};
</script>