Vue组件

组件

1. 组件：有html模板，有css样式，有js逻辑的集合体

2. 根组件的模板就是用挂载点，子组件必须自己定义template（局部子组件、全局子组件）

局部组件

<div id="app">
    <!--div.box>h1{标题}+(p.p${文本内容}*2)-->
    <abc></abc>
    <abc></abc>
</div>
<script src="js/vue.js"></script>
<script>
    // 定义局部组件
    let localTag = {
        // 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
        // 2.data的值就是一个存放数据的字典
        // 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
        data: function () {
            return {
                count: 0,
                // r: ''
            }
        },
        template: `
        <div class="box" style="border: solid;  100px">
            <h1>标题</h1>
            <p class="p1">文本内容</p>
            <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
            <button @click="send"></button>
        </div>
        `,
        methods: {
            action: function () {
                this.count++
            },
            // 结合JQ完成组件与后台的交互
            // send: function () {
            //     $.ajax({
            //         url:,
            //         type:,
            //         data:，
            //         success: function (result) {
            //             this.r = result
            //         }
            //     })
            // },
            // watch: {
            //     r: function () {
            //
            //     }
            // }
        }
    };

    new Vue({
        el: '#app',
        data: {

        },
        // 局部组件必须注册
        components: {
            'abc': localTag
        }
    })
</script>

全局组件

<div id="app">
    <!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->
    <old-boy></old-boy>
</div>

<script src="js/vue.js"></script>
<script>
    // Vue.component(组件名, {组件主体});
    Vue.component('oldBoy', {
        data: function () {
            return {
                count: 0
            }
        },
        template: `
        <div class="box" style="border: solid;  100px">
            <h1>全局</h1>
            <p class="p1">文本内容</p>
            <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
        </div>
        `,
        methods: {
            action: function () {
                this.count++
            },
        }
    });
    // 全局组件无需注册
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>

组件间的交互：父传子

<div id="app">
    <!-- local-tag就可以理解为自定义标签，使用msg变量值由父组件提供 -->
    <!-- local-tag标签代表的是子组件，owen为标签的自定义属性 -->
    <!-- 在子组件内部能拿到owen，就可以拿到父组件的信息 -->
    <local-tag :owen="msg"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        // 子组件拿自定义属性
        props: ['owen'],
        template: `
        <div>
            <h1>信息</h1>
            <p>{{ owen }}</p>
        </div>
        `
    };

    new Vue({
        el: '#app',
        data: {
            msg: '父级的信息'
        },
        components: {
            // 'localTag': localTag,
            // localTag: localTag,
            localTag  // 在页面中 <local-tag>
        }
    })
</script>

组件间的交互：子传父

<div id="app">
    <h1>{{ title }}</h1>
    <global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    Vue.component('global-tag', {
        template: `
        <div>
            <input type="text" v-model="msg">
            <!--<button @click="action">修改标题</button>-->
        </div>
        `,
        data: function () {
            return {
                msg: ''
            }
        },
        methods: {
            // action: function () {
            //     let msg = this.msg;
            //     // recv是自定义的事件
            //     this.$emit('recv', msg)
            // }
        },
        watch: {
            msg: function () {  // 只要msg只有变化，就将值同步给父组件
                this.$emit('recv', this.msg)
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            title: '父组件定义的标题'
        },
        methods: {
            get_title: function (msg) {
                this.title = msg
            }
        }
    })
</script>