vue的组件

什么是组件以及组件的用途

• 每一个组件都是一个vue实例

• 每个组件均具有自身的模板template，根组件的模板就是挂载点

• 每个组件模板只能拥有一个根标签

• 子组件的数据具有作用域，以达到组件的复用

根组件

    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
    <script type="text/javascript">
        // 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
        // 每个组件组件均拥有模板,template
        var app = new Vue({
            // 根组件的模板就是挂载点
            el: "#app",
            data : {
                msg: "根组件"
            },
            // 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
            // 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
            template: "<div>显式模板</div>"
        })
        // app.$template
    </script>

局部组件

    <div id="app">
        <global-tag></global-tag>
        <global-tag></global-tag>
    </div>
    <script>
        Vue.component('global-tag', {
            data () {
                return {
                    count: 0
                }
            },
            template: '<button @click="btnAction">全局{{ count }}</button>',
            methods: {
                btnAction () {
                    this.count ++
                }
            }
        })
        new Vue({
            el: "#app"
        })
    </script>

父组件传递数据给子组件

    <div id="app">
        <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
    </div>
    <script type="text/javascript">
        Vue.component('global-tag', {
            props:['sup_data1', 'supdata2'],
            template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
        })
        new Vue({
            el: '#app',
            data: {
                sup_data1: '数据1',
                sup_data2: '数据2'
            }
        })
    </script>

子组件传递数据给父组件

    <div id="app">
        <global-tag @send_action='receiveAction'></global-tag>
    </div>
    <script type="text/javascript">
        Vue.component('global-tag', {
            data () {
                return {
                    sub_data1: "数据1",
                    sub_data2: '数据2'
                }
            },
            template: '<div @click="clickAction">发生</div>',
            methods: {
                clickAction () {
                    this.$emit('send_action', this.sub_data1, this.sub_data2)
                }
            }
        })
        new Vue({
            el: '#app',
            methods: {
                receiveAction (v1, v2) {
                    console.log(v1, v2)
                }
            }
        })
    </script>

父子组件实现（todoList）

    <div id="app">
        <div>
            <input type="text" v-model="val">
            <button type="button" @click="submitMsg">提交</button>
        </div>
        <ul>
            <!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->
            <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.component("todo-list", {
            template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>",
            props: ['v', 'i'],
            methods: {
                delect_action () {
                    this.$emit("delect_action", this.i)
                }
            }
        })

        new Vue({
            el: "#app",
            data: {
                val: "",
                list: []
            },
            methods: {
                submitMsg () {
                    // 往list中添加input框中的value
                    if (this.val) {
                        this.list.push(this.val);
                        this.val = ""
                    }
                },
                delect_action(index) {
                    this.list.splice(index, 1)
                }
            }
        })
    </script>