首页 > 其他 > 详细

vue中组件的使用

时间:2018-07-16 19:20:25      阅读:162      评论:0      收藏:0      [点我收藏+]

1.组件拆分

对上一个例子中的todolist,进行组件的拆分

Vue.component( id, [definition] )

props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件拆分</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <input type="text" v-model="inputValue">
        <button @click="putList">提交</button>
    </div>
    <ul>
        <todo-item
                v-for="(ls,index) in list"
                :key="index"
                :content="ls"
        >
        <!--在标签中定义了content属性来传递参数给模板组件,在组件中通过props定义[‘content‘]来接受属性-->
        </todo-item>
    </ul>

</div>
<script>

    //1.定义全局组件
    /*
    * Vue.component( id, [definition] )
    * */
    Vue.component(todo-item, {
        props:[content],//props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
        template: <li>{{content}}</li>
    });

    //2.局部组件,在vue实例中声明components来注册指定局部组件
    // var TodoItem = {
    //     template: ‘<li>item</li>‘
    // };

    new Vue({
        el: "#app",
        // components:{
        //     ‘todo-item‘: TodoItem
        // },
        data: {//数据项
            inputValue: "",
            list: []
        },
        methods: {
            putList: function () {
                this.list.push(this.inputValue);
                this.inputValue = "";
            }
        }
    });
</script>
</body>
</html>

 

vue中组件的使用

原文:https://www.cnblogs.com/soul-wonder/p/9319357.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!