二、vue中组件的使用

1.组件拆分

1.组件实质上也是一个vue实例，因此组件中也可以使用vue的对象属性，反过来每一个vue实例也是一个vue组件（注：1.唯一不同的是el是根实例的特有选项，2.组件中的data必须是一个函数）；

2.如果vue实例中没有template模板的定义，那么vue会把el挂载点下的html作为vue实例的模板；

3.模板中如果还有子组件，父组件调用子组件的时候，通过属性的方式进行调用，那么子组件可以使用props接受从父作用域将数据传到子组件，在子组件的模板上进行显示。

对上一个例子中的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>

2.子组件向父组件传值（发布订阅模式）

vm.$emit( eventName, […args] )

子组件向父组件进行传值，是通过发布订阅模式进行传值

还是以todolist为列：

实现点击列表中的某一个数据，删除该数据的功能：

1.在父组件调用的子组件标签中绑定:index="index"，通过index，来删除遍历的数据

2.子组件中通过props: ['content', 'index']，接受数据index

3.在子组件的模板上添加clickItem事件，并在methods中定义该事件，使用$emit来向外发布该事件

4.在父组件调用的子组件标签中可以通过$emit发布过来的delete事件，和传递的index参数，指定一个fuDel删除方法，并在父组件中定义方法fuDel，来删除。

<!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>

        <!--在标签中定义了content属性来传递参数给模板组件,在组件中通过props定义['content']来接受属性-->

        <todo-item

                v-for="(ls,index) in list"

                :key="index"

                :content="ls"

                :index="index"

                @delete="fuDel"

        >

            <!--@delete为父组件调用子组件，对子组件的监听$emit发布进行订阅，来执行父组件fuDel的删除方法-->

        </todo-item>

    </ul>

</div>

<script>

    //1.定义全局组件

    /*

    * Vue.component( id, [definition] )

    * */

    Vue.component('todo-item', {

        props: ['content', 'index'],//props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

        template: '<li @click="clickItem">{{content}}</li>',

        methods: {

            clickItem: function () {

                this.$emit('delete', this.index);//$emit触发当前实例上的事件，向外发布该事件

            }

        }

    });

    //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 = "";

            },

            fuDel: function (index) {

                this.list.splice(index, 1);

            }

        }

    });

</script>

</body>

</html>