039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

转载于 2018-01-04 13:54:00 发布 · 173 阅读

文章标签：

本文介绍了一个使用Vue.js实现的简单示例，展示了如何在一个子组件中使用data属性来管理状态，并通过text-xtemplate的方式定义模板。通过三个相同的子组件实例，演示了动态数据更新和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之子组件中data使用实例与text-xtemplate的使用方法</title>
    <script src="vue.js"></script>
</head>
<body>
<!--
    组件：可互用、维护省力
-->
<div id="lantian">
    <!--局部组件的调用：使用组件的名时，如果是驼峰式的写法，需要用 - 分开-->
    <lt-News></lt-News>
    <hr>
    <lt-News></lt-News>
    <hr>
    <lt-News></lt-News>

</div>
<script typeof="text/x-template" id="ltNews">
    <div>
        <li v-for="(v,k) in news">
        {{v.title}}
        <button @click="del(k)">删除</button>
    </li>
    </div>
</script>
<script>
    var ltNews = {
        template: "#ltNews",
        data() {
            return {
                news: [
                    {title: 'lantianCms'},
                    {title: 'lantianPhp'}
                ]
            };
        },
        methods: {
            del(k) {
                this.news.splice(k, 1);
            }
        }
    };
    new Vue({
        el: "#lantian", //根组件，其他的就是子组件
        //定义局部组件：
        components: {ltNews}
    });
</script>

</body>
</html>