Vue基础（父子组件传值、兄弟组件传值、ref的使用、slot插槽）

Dear 丶 2021-12-07 13:11 312阅读 0赞

## 组件 ##

Vue.component(’组件名称’,’组件’)  
组件包括：  
template  
data  
methods  
生命周期钩子函数  
computed  
watch  
…….

## 1、父组件给子组件传值： ##

子组件用props接受：  
第一种方式：  
props:\[‘title’\] //数组方式接收  
第二种方式（官方推荐）：  
props:\{  
title:\{  
type:String //数据类型  
required:true //是否必须传值，true：必须，false：可选  
\}  
\}

案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>父组件传子组件</title>
        <style> [v-cloak]{  display: none; } </style>
    </head>
    <body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        //子组件
        let HeaderComponent={
            template: `
                <div>
                    我是<span style="font-size:16px;color: ed">{
       {title}}</span>头文件<br>内容:{
       {content}}
                </div>
            `,
           data(){
                return {
                    name:"headerComponent"
                }
            },
            //接收父组件里面的值
            //方法一、数组传值
            props:['title','content'],
            //方法二、对象传值
          /*  props:{  //官方推荐
               title: {
                   type: String,       //检查传值类型
                   required: false  //是否必须有属性
               },
                content:{
                   type: String,
                    required: false
                }
            }*/
        };
        //父组件
        let HomePage={
            template:`
                <div>
                    <HeaderComponent title="首页" content="首页内容"></HeaderComponent>
                    首页
                </div>
            `,
            components: { //浏览器自动解析，key与值相等
                HeaderComponent
            }
        };
        //产品页面
        let GoodsPage={
            template:`
            <div>
                <HeaderComponent title="产品页面" content="产品内容"></HeaderComponent>
                产品页面
            </div>
           `,
              components:{
              HeaderComponent
            }
        }
        new Vue({//所有的组件都需要挂载到入口
            el:"#app",
            //必须有一个
            //调用组件
            template:`
                <div>
              
                <HomePage></HomePage>
                <GoodsPage></GoodsPage>
                    我是根元素组件
                </div>
            `,
            components:{ //挂载局部组件
               /* Hcomp : HeaderComponent,*/
                HomePage,
                GoodsPage
            }
        })
    </script>
    </body>
    </html>

## 2、子组件给父组件传值： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子组件传父组件</title>
        <style>
            [v-cloak]{ display: none; }
        </style>
    </head>
    <body>
    <div id="app" v-cloak> </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
    
        //子组件
        //1、使用click绑定一个方法
        let ChildrenComponent={
            template:`
                <div>
                    <button @click="sendParent()">给父组件传值</button>
                </div>
            `,
            methods: {//给点击事件增加方法
                sendParent(){
                    //2.使用$emit给父组件派发事件
                    //第一个参数是获取函数，第二个参数是传过来的值
                    this.$emit("getChildren" , "我是子组件传过来的值")
                }
            }
        };
        //父组件
        let ParentComponent={
            template: `
                <div>
                    <ChildrenComponent @getChildren="getChildrenData($event)"></ChildrenComponent>
                    父组件
                    子组件的值：{
       {childrenVal}}
                </div>
            `,
            data(){
                return {
                    childrenVal:""
                }
            },
            components: {//挂载子组件
                ChildrenComponent
            },
            methods: {//接收子组件的值
                getChildrenData(data){
                    console.log(data);
                    this.childrenVal=data;
                }
            }
        };
        new Vue({  //所有的组件都需要挂载到入口
            el:"#app",
            //必须有一个，调用组件
            template:`
                <div>
                    <ParentComponent></ParentComponent>
                </div>
            `,
            components:{ //挂载局部组件
                ParentComponent
            }
        })
    </script>
    </body>
    </html>

## 3、兄弟组件传值 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>兄弟组件传值</title>
        <style>
            [v-cloak]{  display: none; }
        </style>
    </head>
    <body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        //bus总线
        var bus=new Vue;
        //A组件
        let componentA={
            template:`
                <div>
                    我是A组件<button type="button" @click="sendB()">给B组件传值</button>
                </div>
            `,
            methods:{
                sendB(){
                    bus.$emit("getA","我是a组件的值");
                }
            }
        };
        //B组件
        let componentB={
            template: `
                <div>
                    我是B组件:<span style="color: red ; font-size: 16px">{
       {msg}}</span>
                </div>
            `,
            data(){
                return{
                    msg:""
                }
            },
            created(){
                bus.$on("getA",(message)=>{
                    //console.log(message);
                    this.msg=message;
                });
            }
        };
        //所有的组件都需要挂载到入口
        new Vue({
            el:"#app",
            //必须有一个 ，调用组件
            template:`
                <div>
                    <componentA></componentA>
                    <componentB></componentB>
                </div>
            `,
            components:{   //挂载局部组件
                componentA,
                componentB
            }
        })
    </script>
    </body>
    </html>

## 4、ref的使用 ##

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>ref</title>
            <style>
                [v-cloak]{ display: none; }
                .box{width: 100px;height: 100px;background: red ; color: #ffffff;margin-top:20px}
            </style>
        </head>
        <body>
        <div id="app" v-cloak></div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
        <script>
            //子组件
            let ChildComponent={
                template:`
                    <div>
                        我是子组件
                    </div>
                `,
                methods:{
                    getChild(){
                        alert("我是子组件里面的方法");
                    }
                }
            }
            //父组件
            let App={
                template:`
                    <div>
                        <div class="box" ref="box1">box1</div>
                        <div class="box" ref="box2">box2</div>
                        <div class="box" ref="box3">box3</div>
                        <ChildComponent ref="child"></ChildComponent>
                        <button type="button" @click="getChildFun()">调用子组件的方法</button>
                    </div>
                `,
                components:{
                    ChildComponent
                },
                /* //不能获取dom放在mounted钩子函数，创建之前获取,初始化数据
                created(){
                    console.log("当前元素"+this.$refs["box1"].innerHTML)
                },*/
        
                //获取dom元素,创建之后获取
                mounted(){
                    console.log("获取当前元素"+this.$refs["box1"]);
                    console.log("获取父级元素："+this.$refs.box1.parentNode.innerHTML);
                    console.log("获取上一个元素："+this.$refs.box2.previousElementSibling.innerHTML);
                    console.log("获取上一个元素："+this.$refs.box2.nextElementSibling.innerHTML)
                },
                methods: {
                    getChildFun(){
                        this.$refs['child'].getChild()
                    }
                }
            }
            new Vue({//所有的组件都需要挂载到入口
                el:"#app",
                //必须有一个，调用组件
                template:`
                    <div>
                        <App></App>
                    </div>
                `,
                components:{ //挂载局部组件
                    App
                },
            })
        </script>
        </body>
        </html>

## 5、slot插槽 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>slot插槽</title>
        <style>
            [v-cloak]{ display: none; }
            .button{width: 100px;height: 25px;border-radius: 5px;font-size: 16px;color: white;text-align: center;line-height: 25px}
        </style>
    </head>
    <body>
    <div id="app" v-cloak> </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        let MyButton={
            template: `
                <div>
                    <div class="button"><slot></slot></div>
                </div>
            `
        }
        new Vue({ //所有的组件都需要挂载到入口
            el:"#app",
            //必须有一个，调用组件
            template:`
                <div>
                   <MyButton style="margin-bottom: 10px; background-color: green;width: 100px">注册</MyButton>
                   <MyButton style="margin-bottom: 10px; background-color: yellow;width: 100px">提交</MyButton>
                   <MyButton>修改</MyButton>
                </div>
            `,
            components:{  //挂载局部组件
                MyButton
            }
        })
    </script>
    </body>
    </html>