Vue中组件的几种使用，子传父，父传子，ref,动态组件

本是古典何须时尚 2022-10-14 13:52 100阅读 0赞

### 注册组件 ###

全局组件注册组件就是利用`Vue.component()`方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

Vue.component('mycomponent',{ 
        template: `<div>这是一个自定义组件</div>`,
        data () { 
          return { 
            message: 'hello world'
          }
        }
      })

如上方式，就已经创建了一个自定义组件，然后就可以在Vue实例挂在的DOM元素中使用它。

直接使用`Vue.component()`创建的组件，所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件。

var app = new Vue({ 
        el: '#app',
        data: { 
        },
        components: { 
          'my-component': { 
            template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
          }
        }
      })

### 模板的要求 ###

**注意**：组件的模板只能有一个根元素。下面的情况是不允许的。

template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div> <button>hello</button>`,

### 组件中的data必须是函数 ###

*  如果组件中的data不是函数的话，那么多个组件将会共享同一个数据，其中一个组件上对数据做出的改变，也会影响另一个组件上的数据 、
 *  组件上的data是函数的情况下，组件每次调用data里面的数据，都是由data这个独有的函数返回过来的数据，所以不会造成这个组件更改data的数据，另一个在使用这个数据的组件也会更改这个数据

在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

自定义组件 `<my-row>` 被认为是无效的内容，因此在渲染的时候会导致错误。这时应使用特殊的 `is` 属性：

### 组件传参 ###

**父传子**  
通过属性向下传  
这是子组件 < my-comp1 :name=“name” :stus=“stus”>< /my-comp1>  
自定义了一个属性 name  
子组件内部使用 props:\{ name: String\} 可以约束类型  
内容可以直接\{ \{name\}\}使用父元素传递过来的值

<div id="app">
            <my-comp1  :name="name" :stus="stus"></my-comp1>
        </div>    
        <script src="./js/vue.js"></script>
        <script>
            let MyComp1 = { 
                props:{ 
                    name: String,
                    // stus: Array,
                    // foo1: Function
                },
                template:`<h1>{ {name}}</h1>`
            }
            let vm = new Vue({ 
                el:'#app',
                data:{ 
                    name:"隔壁老王",
                    stus:['张三','李四','王五']
                },
                components:{ 
                    MyComp1
                }
            })
        </script>

**子传父**  
通过事件向上传递  
在子组件标签上使用 @自定义事件名=‘父组件里面的方法名’  
例如 <my-comp1 @xxx=“foo2”> < /my-comp1>  
子组件内容通过事件触发  
使用 this.$emit(‘自定义事件名’,‘值’)传递数据

<div id="app">
            <my-comp1 @xxx="foo2"></my-comp1>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            let MyComp1 = { 
                template:`<h1 @click="foo1">子组件</h1>`,
                methods:{ 
                    foo1(){ 
                        // 1.子组件发'xxx'消息
                        // this.$emit('xxx')
                        this.$emit('xxx', 'hate')
                    }
                },
                mounted(){ 
                    // 2.当接收到'xxx'消息时,执行指定函数
                    this.$on('xxx',()=>{ 
                        console.log('子组件接收到xxx消息,执行相应代码')
                    })
                }
            }
            let vm = new Vue({ 
                el:'#app',
                components:{ 
                    MyComp1
                },
                methods:{ 
                    foo2(val){ 
                        console.log('父组件接收到xxx消息:'+val)
                    }
                }
            })
        </script>

**父组件通过ref获取子组件数据**

1.直接放在标签中获取元素节点
    2.放在组件中获取组件对象

<div id="app">
            <my-comp1 ref="r1"></my-comp1>
            <button @click="foo1">获取子组件中的值</button><br>
            <button @click="foo2">修改子组件中的值</button>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            let MyComp1 = { 
                data(){ 
                    return { 
                        msg:12345
                    }
                },
                template:`<h1>{ {msg}}</h1>`
            }
            let vm = new Vue({ 
                el:'#app',
                components:{ 
                    MyComp1
                },
                methods:{ 
                    foo1(){ 
                        alert(this.$refs.r1.msg)
                    },
                    foo2(){ 
                        this.$refs.r1.msg = 777
                    }
                }
            })
        </script>

**动态组件**

<div id="app">
            <button @click="cpName='MyComp1'">1111</button>
            <button @click="cpName='MyComp2'">2222</button>
            <button @click="cpName='MyComp3'">3333</button>
    
            
            <keep-alive>
                
                <component :is="cpName"></component>
            </keep-alive>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            let MyComp1 = { 
                template:`<h1 style="color:red">组件-1111</h1>`
            }
            let MyComp2 = { 
                template:`<h1 style="color:green">组件-2222</h1>`
            }
            let MyComp3 = { 
                template:` <div> <h1 style="color:blue">组件-3333</h1> <input type="text"> </div> `
            }
            let vm = new Vue({ 
                el:'#app',
                data(){ 
                    return { 
                        cpName:'MyComp1'
                    }
                },
                components:{ 
                    MyComp1,
                    MyComp2,
                    MyComp3,
                }
            })
        </script>