<script setup>
import { ref, onMounted } from 'vue'
// 響應(yīng)式狀態(tài)
const count = ref(0)
// 用來(lái)修改狀態(tài)、觸發(fā)更新的函數(shù)
function increment() {
  count.value++
}
// 生命周期鉤子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<script>
    export default {
	  name: '',  //`name` 屬性標(biāo)識(shí)組件名稱
      components: { //使用 `components` 選項(xiàng)注冊(cè)子組件 
       }
       // data() 返回的屬性將會(huì)成為響應(yīng)式的狀態(tài)
       // 并且暴露在 `this` 上
      data() {
        return {
          // 所有響應(yīng)式數(shù)據(jù)在這里定義
          count: 0
        };
      },
      // methods 是一些用來(lái)更改狀態(tài)與觸發(fā)更新的函數(shù)
      // 它們可以在模板中作為事件處理器綁定
      methods: {
        // 所有組件方法在這里定義
      },
      // 生命周期鉤子會(huì)在組件生命周期的各個(gè)不同階段被調(diào)用
      created() { /* 實(shí)例創(chuàng)建后 */ },
      mounted() { /* DOM掛載后 */ },
      updated() { /* 數(shù)據(jù)更新后 */ },
      destroyed() { /* 實(shí)例銷毀前 */ },
      // 組件注冊(cè)
      components: {
        // 子組件注冊(cè)
      }
    }
<script>

export default {
  // 組件配置選項(xiàng)
}

data() {
  return {
    newUser: { name: '', email: '' },  // 創(chuàng)建新用戶時(shí)的表單數(shù)據(jù)
    users: [],                         // 存儲(chǔ)從API獲取的用戶列表
    editingUser: null                  // 當(dāng)前正在編輯的用戶
  };
}

created() {
  this.fetchUsers(); // 組件創(chuàng)建時(shí)自動(dòng)獲取用戶列表
}

methods: {
  // 異步獲取用戶列表
  async fetchUsers() {
    try {
      const response = await axios.get('https://api.example.com/users');
      this.users = response.data; // 更新響應(yīng)式數(shù)據(jù)
    } catch (error) {
      console.error('獲取用戶列表失敗:', error);
    }
  }
}

<template>
  <div>
    <!-- 使用導(dǎo)入的組件 -->
    <ArticleList />
  </div>
</template>
// 選項(xiàng)式
<script>
// 導(dǎo)入組件
import ArticleList from '@/components/ArticleList.vue'
export default {
  name: 'ParentComponent',
  components: {
    // 注冊(cè)導(dǎo)入的組件
    ArticleList
  }
}
</script>

<template>
  <div>
    <button @click="refreshArticles">刷新文章</button>
    <button @click="createNewArticle">創(chuàng)建文章</button>
    <!-- 給組件添加 ref 屬性 -->
    <ArticleList ref="articleListRef" />
  </div>
</template>
<script>
import ArticleList from '@/components/ArticleList.vue'
export default {
  name: 'ParentComponent',
  components: {
    ArticleList
  },
  methods: {
    refreshArticles() {
      // 調(diào)用子組件的 fetchArticles 方法
      this.$refs.articleListRef.fetchArticles()
    },
    createNewArticle() {
      // 調(diào)用子組件的 handleCreateArticle 方法
      this.$refs.articleListRef.handleCreateArticle()
    }
  }
}
</script>

<template>
  <div>
    <ArticleList 
      :onRefresh="handleRefresh"
      :onCreate="handleCreate"
    />
  </div>
</template>
<script>
import ArticleList from '@/components/ArticleList.vue'
export default {
  components: {
    ArticleList
  },
  methods: {
    handleRefresh() {
      console.log('父組件處理刷新邏輯')
    },
    handleCreate(articleData) {
      console.log('父組件處理創(chuàng)建邏輯', articleData)
    }
  }
}
</script>

<script>
export default {
  name: 'ArticleList',
  props: {
    onRefresh: Function,
    onCreate: Function
  },
  methods: {
    fetchArticles() {
      // 原有的獲取文章邏輯
      fetch('http://localhost:8000/posts')
        .then(r => r.json())
        .then(data => {
          this.articles = data
          // 如果有傳遞回調(diào)函數(shù)，則調(diào)用
          if (this.onRefresh) {
            this.onRefresh(data)
          }
        })
    },
    handleCreateArticle() {
      // 原有的創(chuàng)建邏輯...
      // 如果有傳遞回調(diào)函數(shù)，則調(diào)用
      if (this.onCreate) {
        this.onCreate(this.newArticle)
      }
    }
  }
}
</script>

<template>
  <div class="parent">
    <h1>博客管理</h1>
    <div class="controls">
      <button @click="triggerRefresh" :disabled="isLoading">
        {{ isLoading ? '加載中...' : '刷新文章' }}
      </button>
      <button @click="showCreateForm = true">新建文章</button>
    </div>
    <!-- 使用子組件 -->
    <ArticleList 
      ref="articleList"
      :externalCreateData="createFormData"
      @articles-loaded="onArticlesLoaded"
      @article-created="onArticleCreated"
    />
    <!-- 父組件的創(chuàng)建表單 -->
    <div v-if="showCreateForm" class="modal">
      <h3>創(chuàng)建新文章</h3>
      <input v-model="createFormData.title" placeholder="標(biāo)題">
      <textarea v-model="createFormData.content" placeholder="內(nèi)容"></textarea>
      <button @click="submitCreateForm">提交</button>
      <button @click="cancelCreate">取消</button>
    </div>
  </div>
</template>
<script>
import ArticleList from '@/components/ArticleList.vue'
export default {
  name: 'BlogManagement',
  components: {
    ArticleList
  },
  data() {
    return {
      isLoading: false,
      showCreateForm: false,
      createFormData: {
        title: '',
        content: ''
      }
    }
  },
  methods: {
    // 觸發(fā)子組件的刷新方法
    triggerRefresh() {
      this.isLoading = true
      this.$refs.articleList.fetchArticles()
    },
    // 觸發(fā)子組件的創(chuàng)建方法
    submitCreateForm() {
      this.$refs.articleList.handleCreateArticle(this.createFormData)
      this.showCreateForm = false
    },
    cancelCreate() {
      this.showCreateForm = false
      this.createFormData = { title: '', content: '' }
    },
    // 監(jiān)聽(tīng)子組件的事件
    onArticlesLoaded(articles) {
      this.isLoading = false
      console.log('文章加載完成:', articles)
    },
    onArticleCreated(newArticle) {
      console.log('新文章創(chuàng)建:', newArticle)
      this.createFormData = { title: '', content: '' }
    }
  }
}
</script>

<template>
  <div class="article-list">
    <div v-if="articles.length === 0" class="empty">暫無(wú)文章</div>
    <ArticleCard 
      v-for="article in articles" 
      :key="article.id" 
      :article="article" 
    />
  </div>
</template>
<script>
import ArticleCard from './ArticleCard.vue'
export default {
  name: 'ArticleList',
  components: {
    ArticleCard
  },
  props: {
    // 從父組件接收創(chuàng)建數(shù)據(jù)
    externalCreateData: {
      type: Object,
      default: () => ({ title: '', content: '' })
    }
  },
  data() {
    return {
      articles: [],
      newArticle: {
        title: '',
        content: '',
        author: '左越'
      }
    }
  },
  watch: {
    // 監(jiān)聽(tīng)外部創(chuàng)建數(shù)據(jù)的變化
    externalCreateData: {
      handler(newData) {
        if (newData.title || newData.content) {
          this.newArticle = { ...newData, author: '左越' }
          this.handleCreateArticle()
        }
      },
      deep: true
    }
  },
  created() {
    this.fetchArticles()
  },
  methods: {
    async fetchArticles() {
      try {
        const response = await fetch('http://localhost:8000/posts')
        const data = await response.json()
        this.articles = data
        // 觸發(fā)事件通知父組件
        this.$emit('articles-loaded', data)
      } catch (err) {
        console.log('error', err)
        this.$emit('articles-loaded', [])
      }
    },
    async handleCreateArticle(externalData = null) {
      const articleData = externalData || this.newArticle
      if (!articleData.title.trim() || !articleData.content.trim()) {
        alert('請(qǐng)?zhí)顚?xiě)所有字段')
        return
      }
      try {
        const response = await fetch('http://localhost:8000/posts', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(articleData)
        })
        const newArticle = await response.json()
        this.articles.unshift(newArticle)
        // 觸發(fā)事件通知父組件
        this.$emit('article-created', newArticle)
        // 重置表單
        this.resetForm()
      } catch (err) {
        console.error('error: ', err)
      }
    },
    resetForm() {
      this.newArticle = {
        title: '',
        content: '',
        author: '左越'
      }
    }
  }
}
</script>