07-Vue组件

1、局部组件和全局组件

    <div id="app">
        {{mess}}
        <abc></abc>
    </div>

<script>
        // 什么是组件？
        // 编写 可复用组件 的几个原则
        // 1. 以组件的功能命名
        // 2. 只负责ui 的展示和交互动画，不要在组件中与服务器打交道
        // 3 可复用组件不会因组件的位置，场景而发生变化，尽量减少对外部条件的依赖
        var head = Vue.extend({ // 继承出来一个vue 实例
            template: "<h2>{{message}}</h2>",
            data() {
                return {
                    message: "我是局部组件"
                }
            }
        })
        // 挂载到全局
        Vue.component("abc", head)

        var vm = new Vue({
            el: "#app",
            data: {
                mess: "我是父亲"
            },
            // components: { // 用来声明局部组件
            //     abc: head // 将组件head 重命名为abc
            // }
        })
        var vms = new Vue({
            el: "#two",
            data: {
                mess: "我是父亲"
            },
        })
    </script>

2、父传子

//当你创建一个组件时，那个组件名就是子组件
//当你创建一个Vue实例时，el需绑定div，那么这个div就是父组件
<div id="app">
        <input type="text" v-model="pMessage"><br>
        ===========上面是父组件 下面是子组件挂载================
        <!-- 使用子组件， 以下两种写法都可以 -->
        <!-- <my-component /> -->
        <my-component :my-msg="pMessage"></my-component>
</div>

<script>
    // 父组件 向 子组件 传值,  通过 props
    // 给子组件绑定一个自定义属性，在子组件内部使用 props 进行接收渲染父组件的传来的对应值
    const child = Vue.extend({ // 构造子组件
        template: `<div><p>{{ cMessage }}</p><button @click="change()">修改</button></div>`,
        props: ['myMsg'], // 在子组件中声明一个props属性，里面是 接收父组件数据的对应属性名
        data() {
            return {
                cMessage: 456
            }
        },
        methods: {
            change() {
                // 获取父组件中的值并使用
                this.cMessage = this.myMsg
            }
        }
    })
    new Vue({
        el: '#app',
        data() {
            // 局部组件注册在vue选项中，此时，data必须用return
            return {
                pMessage: 'Hello World'
            }
        },
        components: {
            myComponent: child
        }
    })
</script>

上述运行结果：

 

3、子传父

<div id="app">
        <p>{{ total }}</p> <br>
        ============================== <br>
        <!-- <button @click="increment()">{{ counter }}</button> -->
        <button-counter @c-add-emit="pTotalEmit" :step="1" />
    </div>

<script>
    // $http $refs $emit
    // 子组件向父组件传值， 通过事件调用实现， $emit
    // 给子组件绑定一个自定义事件，$emit 值是接收参数的函数.父组件函数接收的值就是子组件传递参数。要在子组件内部使用 this.$emit() 发送
    const child = Vue.extend({
        template: `<button @click="increment()">点击次数 {{ counter }}</button>`,
        props: ['step'],
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            increment() {
                this.counter += this.step
                /**
                 * 
                 *let params =  {
                 *      name: this.name,
                 *      age: this.age,
                 *      counter: this.counter
                 * }
                 * this.$emit('c-add-emit', params)
                 */
                // 第一个参数：注册触发的事件名， 第二个参数： 需要传递的参数对象
                //实际上将我们真正要执行的那个函数留在了Vue对象里去实现，这样可以保证
                //组件的可复用性
                this.$emit('c-add-emit', this.counter)
            }
        }
    })
    const parent = new Vue({
        el: '#app',
        data() {
            return {
                total: 0
            }
        },
        components: {
            'button-counter': child
        },
        methods: {
            pTotalEmit(counter) {
                this.total = counter
            }
        }
    })
</script>

上述运行结果：

​​​​​​​