组件

组件

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是  <my-com>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

全局组件:

<div id="box">
    <my-com></my-com>//如果创建的组件使用大驼峰命名法，此处需要用"-"链接
</div>

//创建全局组件
Vue.component('myCom',{
    template:'<div>cc</div>'//此处为根元素,只能有一个,如果多写或者不写，
    报错:
        Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
    翻译:组件模板应该只包含一个根元素。如果在多个元素上使用v-if，则使用v-else-if来链接它们。
    
})

//实例化Vue
    new Vue({
        el:'#box'
    })

最后:【此时页面上则显示组件根元素上的内容cc】

局部组件

        <div id="box">
            <com1 :c="123"></com1>//绑定vue实例中的数据的c值
            <com1></com1>
        </div>
    <!-- 定义局部组件 -->
        var com1 = {
            props: ['c'],//父组件向子组件传过来的值
            template:`
            <div>abc231
                {{a}}
                {{c}}
            <button @click="inc">+</button>
            </div> `,
注意事项1：
    【数据data必须为函数类型,其返回值必须使用return返回一个对象形式，只有这样外面才可以调用,因此每个实例可以维护一份被返回对象的独立的拷贝：】
            data() {
                    return {
                        a: 1
                    }
                },
            方法：点击++
                methods: {
                    inc() {
                        this.a++
                    }
                }
            }
注意事项:2
    定义一个组件，此组件要与局部组件的名称一致，否则会报错(局部组件.html:46 Uncaught ReferenceError: com is not defined
    at),如果html的标签名与组件名不一致，会显示(vue.js:634 [Vue warn]: Unknown custom element: <com> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    (found in <Root>)) 
        new Vue({
            el: '#box',
            components: {
                com1
            }
        })

props验证

props:{
    type:Number         //类型，可以为其他类型
    require:true        //可以使用required选项来声明这个参数是否必须传入。
    default:1000        //默认值
    validator(v){
        return v>值&&v<值  //自定义规则
    }
}

子组价向父组件传值

1、其中有两个事件需要注意一下$emit和v-on(以下代码详细阐述)
2、主要部分为两步(
    1、父组件监听，使用v-on:事件名="事件处理函数($event其实就是一个值，可以省略)"
    2、子组件发送数据(使用this.$emit('msg',发送的数据))
)

兄弟组件通过公共的父组件传值

        <div id="box">
            <Txt v-on:msg="receive"></Txt>//监听子组件传过来的值,此处省略($event)传过来的值
            <List :list="list"></List>
        </div>
        <script>
            var Txt = {
                template: `<input type='text' v-model="str" v-on:keyup.enter="add" />`,//键盘回车事件触发
                data() {
                    return {
                        str: ''
                    }
                },
                methods: {
                    add() {
                        this.$emit("msg", this.str);//向父组件发送数据
                        this.str = ""
                    }
                }
            }
            var List = {
                props: ["list"],//接收数据
                template: `<ul>
                        <li v-for="(item,index) in list" :key="index">{{item}}</li>
                    </ul>`
            }
            new Vue({
                el: "#box",
                data: {

                    list: []
                },
                components: {
                    Txt, List       //定义组件
                },
                methods: {
                    receive(str) {//文本组件传过来的数据
                        this.list.push(str);//将值传入list
                    }
                }
            })
        </script>

使用bus方式进行子向父组件传递

        <div id="box">
            <Txt></Txt>
            <List></List>
        </div>
        <script>
            var bus = new Vue();  //$on  $emit
            var Txt = {
                template: `<input type='text' v-model="str" v-on:keyup.enter="add" />`,
                data() {
                    return {
                        str: ''
                    }
                },
                methods: {
                    add() {
                        bus.$emit("msg", this.str); //发送数据
                        this.str = ""
                    }
                }
            }
            var List = {
                created() {
                    //监听数据
                    bus.$on("msg", (data) => {
                        this.list.push(data)
                    })
                },
                data() {
                    return {
                        list: []
                    }
                },
                template: `<ul>
                        <li v-for="(item,index) in list" :key="index">{{item}}</li>
                    </ul>`
            }
        new Vue({
                el: "#box",
                components: {
                    Txt, List
                }
            })
          
        </script>