组件的注册 传参 双向数据绑定

组件

• 根组件：通过new Vue()来创建的，通常应用只有一个
• 可复用组件：通过Vue.component()来创建 分为全局组件和局部组件

组件的注册

vue.component

Vue.componrnt(‘组件名称’，{组件选项})

• 组件名称遵循自定义组件命名规范：全小写、连字符
• 组件选项与

new Vue选项配置基本一致

<div id="app">
        <k-div></k-div>
    </div>

//可复用组件的全局注册 
        Vue.component("k-div",{
            template:`<div>
                    <div>aaa</div>
                        <p-p-t></p-p-t>
                    <div>bbb</div>
                </div>
            `,
            components:{
                'p-p-t':{
                    template:`<p>我是一个段落标签</p>`
                }
            }
        })
        let app = new Vue({
            el:"#app"
        })

注意：局部注册的组件只能中当前注册的组件中使用，不能在它的子组件中使用

组件的传参

父传子
父组件通过自定义属性的方式传给子组件，子组件通过props接收

   <div id="app">
        <!-- 父传子 使用v-bind绑定属性 -->
        <k-div v-bind:pages = "100"></k-div>
    </div>
    <script>
        //可复用组件的全局注册中最上层只能有一个元素
        Vue.component("k-div",{
            // 子接：使用属性props
            // "props"：使用存储数据，数据的使用方式和data一致
            props:["pages"],
            template:`
                    <div>bbb{{pages}}</div>
            `,
        })
        let app = new Vue({
            el:"#app"
        })
    </script>

子传父
父组件通过自定义事件的方式向子组件传递子组件通过$emit来接受参数

注：Vue中的数据磨人的单向滚动，只能父到子直接传递，但是子到父不能直接修改。因为腹肌的数据，不一定只是某个子级使用，或许还有其他的子级也在使用，那么如果一个子级内部随意去修改了父级的数据，很容易导致数据混乱。
如果子级想修改数据：1>子级执行#emit()来触发自定义事件。2>父级鉴听 子级触发的自定义事件 3>监听到触发 执行父级的回调函数
子级在特定条件下，触发自定义事件来通知父级。父级通过改变接收到通知后，自己决定是否改变数据

<div id="app">
        <k-div v-on:hello = "fn"></k-div>
        <p>我是子组件传参过来的{{name}}</p>
    </div>
    <script>
        Vue.component("k-div",{
            // props:["pages"],
            data(){
                return{
                    name:"祥子"
                }
            },
            template:`
                    <div>
                        <p>我是老大</p>
                        <p>我是老二</p>
                        <button @click="go">点击按钮</button>
                    </div>
            `,
            methods:{
                //子元素触发
                go(){
                    this.$emit("hello",this.name)
                }
            }
        })
        let app = new Vue({
            el:"#app",
            data:{
                name:""
            }, 
            methods:{
                fn(n){
                    // console.log("我是鉴听子组件的函数")
                    console.log(n)
                }
            }
        })
    </script>

双向数据绑定

双向数据绑定简单点来说就是数据与视图的交互（父与子的交互）
父传子

• 子组件绑定父组件属性
• 子组件通过props接收使用
• model中的prop指定属性

子传父

• 子组件触发自定义事件
• model中指定自定义事件
• 自动监听,自动回调函数,自动赋值

<div id="app">
        <!-- 通过v-bind单向绑定数据 -->
        <mc-tao :mm="msg" @gg="fn"></mc-tao>
        <p>{{msg2}}</p>
        <hr>
        <!-- 通过v-model单向绑定数据 -->
        <mc-yang v-model="rootmsg"></mc-yang>
        <p>我是父组件的：{{rootmsg}}</p>
    </div>
    <script>
        Vue.component("mc-tao",{
            props:["mm"],
            data(){
                return{
                    name:"子级数据"
                }
            },
            template:`
                    <div>
                        {{mm}}
                        <button @click="go">点击按钮</button>
                    </div>
            `,
            methods:{
                go(){
                    this.$emit("gg",this.name)
                }
            }
        }); 
        Vue.component("mc-yang",{
            props:["mm","rootmsg"],
            //model选项就是用来指定绑定的属性和绑定的事件
            model:{
                //prop作用：告诉v-modol绑定的prop是哪个
                prop:`rootmsg`,
                // event：告诉v-modol触发什么事件的时候 自动去修改绑定的值
                event:"gofather"//封装鉴听回调和赋值
            },
            data(){
                return{
                    name:"子级数据"
                }
            },
            template:`
                    <div>
                        {{mm}}
                        <button @click="goto">点击按钮</button>
                        <p>我是子组件的：{{rootmsg}}</p>
                    </div>
            `,
            methods:{
                //子元素触发
                goto(){
                    this.$emit("gofather",this.name);
                }
            }
        });
        let app = new Vue({
            el:"#app",
            data:{
                msg:"父级信息",
                msg2:"",
                rootmsg:"父级2"
            }, 
            methods:{
                fn(n){
                    // console.log("我是鉴听子组件的函数")
                    console.log(n)
                    // this.name = n;
                }
            }
        })
    </script>

v-model 是 vue提供的一个用于实现数据双向绑定的指令，用来简化 props到 data，data到props的操作流程
注意：v-model后面是=