组件与实例的关系

最新推荐文章于 2024-07-16 07:17:34 发布

xuxinwen32

最新推荐文章于 2024-07-16 07:17:34 发布

阅读量699

点赞数

分类专栏：前端文章标签：组件与实例的关系

本文链接：https://blog.csdn.net/xuxinwen32/article/details/86673848

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist组件拆分2</title>
    <script src="../2.5.20-vue.js"></script>   <!--//提前加载，避免出现抖屏-->
</head>
<body>

<div id="root">
    <div>
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
       <todo-item
       v-for = "(item, index) of list" :key="index"
       :content = "item"
       ></todo-item>
    </ul>
</div>

<script>


    Vue.component("todo-item", {         //vue的每个组件都是一个vue的实例
        props: ['content'],          //我这个小组件定义接收从外面传过来的content的属性值       渲染完组建以后对实例的操作
        template: '<li @click="handleClick2">{{content}}</li>',
        methods: {
            handleClick2(){
                alert("click")
            }
        }
    });
 /*   var TodoItem = {           //局部变量定义的组件
        template: '<li>item</li>'
    }*/
    new Vue({
        el: '#root',  /**创建vue的实例，接管id等于root的内容*/               /*如果你不定义component那么它会把root下面的内容当作component的内容*/
        data: {
            inputValue: "",
            list: []
        },
        methods: {
            handleSubmit(){
                this.list.push(this.inputValue)
                this.inputValue = ''
            },
            handleClick2(){
                alert("click2")
            }
        }

    })
</script>

</body>
</html>