1. 程式人生 > >39.VUE學習--元件,子元件中data資料的使用,x-template模板的使用

39.VUE學習--元件,子元件中data資料的使用,x-template模板的使用

多處引用相同元件時,操作data不會相互影響

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue</title>
    <link rel="stylesheet" href="">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->

</head>
<body>
<div id="hdcms">
    <hd-news></hd-news> <!--引入模板 和new Vue()裡的components裡註冊時的名字 hdNews 要一致-->
    <hr>
    <hd-news></hd-news>

</div>
<script type="text/x-template" id="hdNewstemplate">
    <div>
        <li v-for="(v,k) in news">{{v.id}}=>{{v.title}}  <button @click="del(k);">刪除</button></li>
    </div>
</script>
<script>
    var hdNews={
        //繫結id="hdNews" 的 x-template模板
        template:'#hdNewstemplate',
        data(){
            return {
                news:[
                    {id:0,title:'tpshop'},
                    {id:1,title:'hdcms'}
                ],
            }
        },
        methods:{
            del(k){
                console.log(k);
                this.news.splice(k,1)
            }
        }
    }
    new Vue({
        el:'#hdcms',
        //繫結元件hdNews  hdNews:hdNews簡寫成hdNews
        components:{hdNews},
        data:{},
    });




</script>
</body>
</html>

效果: