《前端》vue學習(四)中-評論功能案例-練習父子組件之間傳值-2020年6月17日

目標:主要練習父子組件之間傳值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">
        <!-- 組件: -->
        <!-- 綁定了父組件的一個方法 loadComments -->
        <cmt-box @func="loadComments"></cmt-box>
        <!-- 評論內容列表 -->
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">評論人: {{ item.user }}</span> {{ item.content }}
            </li>
        </ul>
    </div>
    <!-- 模板 -->
    <template id="
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章