VUE —— 6、父组件传参到子组件、父组件操作子组件、子组件操作父组件($emit)、兄弟组件传参

比眉伴天荒 2023-01-24 03:27 188阅读 0赞

**目录**

（10）组件

1.父组件传参到子组件

（1）方式一：数组接收

（2）方式二：数组对象接收

（3）方式三：对象接收（推荐）

（4）传入不同的名称

（5）传入不同的样式

（6）传入一个对象

（7）传入一个函数

2.父组件操作子组件($refs)

3.子组件操作父组件 ($emit)

（1）子组件传参父组件

（2）子组件操作父组件 （传入函数）

4.兄弟组件传参

--------------------

# （10）组件 #

定义：组件是vue里面最强的功能，可以扩展html，封装重用的代码

vue中的核心之一就是组件，所以有页面都是通过组件来管理，当组件过多时，如何进行参数的传递

![20210716175925359.png][]![20210716175926757.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]![20210716175930232.png][]

##  1.父组件传参到子组件 ##

![20210716175943724.png][]

为什么组件需要传入参数呢？

定义按钮组件

不同的页面中有多个按钮，有的名称是‘新增’，‘提交’，‘删除’，‘退出’，‘修改’等，也有可能会有不同的样 式，以及不同的函数...能不能写一个组件，传入不同来实现

### （1）方式一：数组接收 ###

=========================== **上面写过** ==================================

**index****.vue****（父）**

<template>
      <div>
    ------------------------------------ 添加 ------------------------------------------
    <Banner :img="img" />
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
        return {
    ------------------------------------ 添加 ------------------------------------------
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
    -----------------------------------------------------------------------------------
        };
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

**Banner****.vue****（子）**

<template>
      <div class="banner">
        <img v-for="(v, i) in img" :key="i" :src="v" v-show="i==n" />
        <div class="banner-circle">
          <ul>
            <li v-for="(v, i) in img" :key="i" :class="i==n ? 'selected' : ''"></li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Demo",
      data() {
        return {
          // img:[require("@/assets/img/1.jpg"),
          //      require("@/assets/img/2.jpg"),
          //      require("@/assets/img/1.jpg"),
          //      require("@/assets/img/2.jpg")],
          n: 0,
          timer: null,
        };
      },
    -----------------------------------------------------------------------------------
      props:['img'], //数组的方式
    -----------------------------------------------------------------------------------
      methods: {
        play() {
          this.timer = setInterval(this.autoPlay, 2000);
        },
        autoPlay() {
          this.n++;
          if (this.n >= this.img.length) {
            this.n = 0;
          }
        },
      },
      mounted() {
        //挂载完成  生命 周期钩子函数
        this.play();
      },
      destroyed() {
        clearInterval(this.timer);
      },
    };
    </script>
    
    <style scoped>
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

**Banner****.vue****（子）**

<template>
      <div class="banner">
        <img v-for="(v, i) in img" :key="i" :src="v" v-show="i==n" />
        <div class="banner-circle">
          <ul>
            <li v-for="(v, i) in img" :key="i" :class="i==n ? 'selected' : ''"></li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Demo",
      data() {
        return {
          // img:[require("@/assets/img/1.jpg"),
          //      require("@/assets/img/2.jpg"),
          //      require("@/assets/img/1.jpg"),
          //      require("@/assets/img/2.jpg")],
          n: 0,
          timer: null,
        };
      },
    ------------------------------- 添加 'a' -------------------------------------------
      props:['img','a'], //数组的方式
    -----------------------------------------------------------------------------------
      methods: {
        play() {
          this.timer = setInterval(this.autoPlay, 2000);
        },
        autoPlay() {
          this.n++;
          if (this.n >= this.img.length) {
            this.n = 0;
          }
        },
      },
      mounted() {
        //挂载完成  生命 周期钩子函数
        this.play();
      },
      destroyed() {
        clearInterval(this.timer);
      },
    };
    </script>
    
    <style scoped>
    </style>

**index****.vue****（父）**

<template>
      <div>
    ------------------------------- 添加 :a="10" ---------------------------------------
        <Banner :img="img" :a="10" />
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
        return {
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

### （2）方式二：数组对象接收 ###

**可直接写类型**

**Banner****.vue****（子）**

<template>
      <div class="banner">
        <img v-for="(v, i) in img" :key="i" :src="v" v-show="i==n" />
        <div class="banner-circle">
          <ul>
            <li v-for="(v, i) in img" :key="i" :class="i==n ? 'selected' : ''"></li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Demo",
      data() {
        return {
          // img:[require("@/assets/img/1.jpg"),
          //      require("@/assets/img/2.jpg"),
          //      require("@/assets/img/1.jpg"),
          //      require("@/assets/img/2.jpg")],
          n: 0,
          timer: null,
        };
      },
      // props:['img','a'], //数组的方式
    ---------------------------------- 添加 --------------------------------------------
      props:{    //对象（可直接写类型） 
          img: Array,	//Array数组
          a: String		//String字符串
      },
    -----------------------------------------------------------------------------------
      methods: {
        play() {
          this.timer = setInterval(this.autoPlay, 2000);
        },
        autoPlay() {
          this.n++;
          if (this.n >= this.img.length) {
            this.n = 0;
          }
        },
      },
      mounted() {
        //挂载完成  生命 周期钩子函数
        this.play();
      },
      destroyed() {
        clearInterval(this.timer);
      },
    };
    </script>
    
    <style scoped>
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]//一样（不懂，后面写任何类型都没反应）

###  （3）方式三：对象接收（推荐） ###

**可以定义类型及默认值**

**Banner****.vue****（子）**

<template>
      <div class="banner">
        <img v-for="(v, i) in img" :key="i" :src="v" v-show="i==n" />
        <div class="banner-circle">
          <ul>
            <li v-for="(v, i) in img" :key="i" :class="i==n ? 'selected' : ''"></li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Demo",
      data() {
        return {
          // img:[require("@/assets/img/1.jpg"),
          //      require("@/assets/img/2.jpg"),
          //      require("@/assets/img/1.jpg"),
          //      require("@/assets/img/2.jpg")],
          n: 0,
          timer: null,
        };
      },
      // props:['img','a'], 	//数组的方式
      // props:{    			//对象的方式  1、直接写类型
      //     img: Array,	//Array数组
      //     a: String	//String字符串
      // },
    ---------------------------------- 添加 --------------------------------------------
      props: {
        //对象的方式 （可以定义类型及默认值）
        img: { 
          type: Array,	//Array数组
          default: () => [require("@/assets/img/1.jpg")],	//默认值
        },
        a: {
          type: Number,	//Number整数
          default: 1,
        },
      },
    -----------------------------------------------------------------------------------
      methods: {
        play() {
          this.timer = setInterval(this.autoPlay, 2000);
        },
        autoPlay() {
          this.n++;
          if (this.n >= this.img.length) {
            this.n = 0;
          }
        },
      },
      mounted() {
        //挂载完成  生命 周期钩子函数
        this.play();
      },
      destroyed() {
        clearInterval(this.timer);
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180159627.png][] //img改成img1时，报错，使用默认值：

![20210716180205954.png][]//默认值，只有一个

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3][]//没用默认值，两个

###  （4）传入不同的名称 ###

**Btn****.vue****（子）**

<template>
      <button>修改</button>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: "我是按钮",
        };
      },
    };
    </script>
    index.vue（父）
    <template>
      <div>
    <Banner :img="img" :a="10" />
    ------------------------------------ 添加 ------------------------------------------
        <div>
          <Btn />
        </div>
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
        return {
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180238694.png][]**//变为**

**Btn****.vue****（子）**

<template>
    ------------------------------- 换成 {
       {title}} -------------------------------------
      <button>{
       {title}}</button>
    -----------------------------------------------------------------------------------
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: "我是按钮",
        };
      },
    ------------------------------------ 添加 ------------------------------------------
      props:{
        title:{
          type: String,
          default: '按钮'
        },
      }
    -----------------------------------------------------------------------------------
    };
    </script>

**index****.vue****（父）**

<template>
      <div>
    <Banner :img="img" :a="10" />
    <div>
    ----------------------------- 添加 :title="name" -----------------------------------
          <Btn :title="name"/>
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
    return {
    ------------------------------------ 添加 ------------------------------------------
          name: "提交",
    -----------------------------------------------------------------------------------
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180305830.png][]**//****变为**

![2021071618031257.png][]**//换成”新增”会无效，使用默认值：**![20210716180318283.png][]

=====================================================================

**    index.vue**

**    Btn.vue**

<button>{
       {title}}</button>
        //1、数组的方式
        props:['title']
        //2、对象的方式(1) 直接定义
        props: {
            title: String
        }
        //3、 对象的方式(2) 添加类型和默认值
        props: {
            title: {
                type: String,
                default:'按钮'
            }
        }

### （5）传入不同的样式 ###

**Btn****.vue****（子）**

<template>
    ----------------------- 添加 :style="{color: color}" -------------------------------
       <button :style="{color: color}">{
       {title}}</button>
    -----------------------------------------------------------------------------------
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: "我是按钮",
        };
      },
      props:{
        title:{
          type: String,
          default: '按钮'
    },
    ------------------------------------ 添加 ------------------------------------------
        color:{
          type: String,
          default: '#333'
        }
    -----------------------------------------------------------------------------------
      }
    };
    </script>

**index****.vue****（父）**

<template>
      <div>
    <Banner :img="img" :a="10" />
    <div>
    --------------------------- 添加:color="'red'" -------------------------------------
          <Btn :title="name" :color="'red'"/>
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
    return {
          name: "提交",
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180435994.png][]**//提交、红色（不是默认值）**

**index****.vue****（父）**

<template>
      <div>
    <Banner :img="img" :a="10" />
    <div>
          <Btn :title="name" :color="'red'"/>
    ------------------------------------ 添加 ------------------------------------------
          <Btn :title="'这是一个按钮'" :color="'blue'"/>
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
    return {
          name: "提交",
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180456119.png][]**//****这是一个按钮、蓝色（上面\{\}内各种样式随便写）**

====================================================================

**   index.vue**

**    Btn.vue**

<button :style="{color:color}">{
       {title}}</button>
        // 1、数组的方式
        props: ['title','color']
        // 2、对象的方式
        props: {
            title: String,
            color: String
        }

### （6）传入一个对象 ###

**Btn****.vue****（子）**

<template>
    --------------------------------- 添加 obj. ----------------------------------------
      <button :style="{color: obj.color, padding: obj.padding}">
        {
       {obj.title}}
      </button>
    -----------------------------------------------------------------------------------
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: "我是按钮",
        };
      },
    ------------------------------------ 关掉 ------------------------------------------
      props:{
        title:{
          type: String,
          default: '按钮'
      },
        color:{
          type: String,
          default: '#333'
        }
      }
    ------------------------------------ 添加 ------------------------------------------
      props: {
        obj: {
          title: String,
          color: String,
          padding: String,
        },
      },
    -----------------------------------------------------------------------------------
    };
    </script>

**index****.vue****（父）**

<template>
      <div>
    <Banner :img="img" :a="10" />
    <div>
    ------------------------------------ 关掉 ------------------------------------------
          //<Btn :title="name" :color="'red'"/>
          //<Btn :title="'这是一个按钮'" :color="'blue'"/>
    ------------------------------------ 添加 ------------------------------------------
          <Btn :obj="obj"/>
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
    return {
          name: "提交",
    ------------------------------------ 添加 ------------------------------------------
          obj: {title: "查看详情", color: "green", padding: "10px"},
    -----------------------------------------------------------------------------------
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180610649.png][]**//边框、颜色**

**index****.vue****（父）**

<template>
      <div>
    <Banner :img="img" :a="10" />
    <div>
          //<Btn :title="name" :color="'red'"/>
          //<Btn :title="'这是一个按钮'" :color="'blue'"/>
          <Btn :obj="obj"/>
    ------------------------------------ 添加 ------------------------------------------
          <Btn :obj="obj2"/>
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
    return {
          name: "提交",
          obj: {title: "查看详情", color: "green", padding: "10px"},
    ------------------------------------ 添加 ------------------------------------------
          obj2: { title: "查看详情", color: "blue", padding: "5px" },
    -----------------------------------------------------------------------------------
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180631916.png][]

**Btn****.vue****（子）**

<template>
      <button :style="{color: obj.color, padding: obj.padding}">
        {
       {obj.title}}
      </button>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: "我是按钮",
        };
      },
      props:{
        title:{
          type: String,
          default: '按钮'
      },
        color:{
          type: String,
          default: '#333'
        }
      }
      props: {
        obj: {
    ------------------------------------ 换成 ------------------------------------------
          title: {
            type: String,
            default: "按钮",
          },
    -----------------------------------------------------------------------------------
          color: String,
          padding: String,
        },
      },
    };
    </script>

//也可在里面设置默认值

=====================================================================

**    index.vue**

<Btn :obj="obj" />
        data(){
            return {
                obj: {	title: '查看详情', 
                       	color: 'green', 
                       	padding: '10px'
                }
            }
    }

**    Btn.vue**

<button :style="{color:obj.color,padding:obj.padding}"> {
       {obj.title}} </>
    // 接收父的参数：
        // 1、数组的方式
        props: ['obj']
        // 2、对象的方式
        props: {
            obj: {
                title: String,
                color: String,
                padding: String
            }
        }

### （7）传入一个函数 ###

**传入一个计算相加的函数** **:**

**Btn****.vue****（子）**

<template>
    ---------------------------- 添加 @click="send()" ----------------------------------
      <button :style="{color: obj.color, padding: obj.padding}" @click="send()">
    -----------------------------------------------------------------------------------
        {
       {obj.title}}
      </button>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: "我是按钮",
        };
      },
      props:{
        title:{
          type: String,
          default: '按钮'
      },
        color:{
          type: String,
          default: '#333'
        }
      }
      props: {
        obj: {
          title: {
            type: String,
            default: "按钮",
          },
          color: String,
          padding: String,
    },
    ------------------------------------ 添加 ------------------------------------------
    action: Function,	 //父传入子的函数（限制为函数类型）
    -----------------------------------------------------------------------------------
      },
    ------------------------------------ 添加 ------------------------------------------
      methods: {
        send() {
          this.action(1, 2);
        },
      },
    -----------------------------------------------------------------------------------
    };
    </script>

**index****.vue****（父）**

<template>
      <div>
    <Banner :img="img" :a="10" />
    <div>
          //<Btn :title="name" :color="'red'"/>
          //<Btn :title="'这是一个按钮'" :color="'blue'"/>
          //<Btn :obj="obj"/>
    --------------------------- 添加 :action="action" ----------------------------------
          <Btn :obj="obj2" :action="action" />
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
    return {
          name: "提交",
          obj: {title: "查看详情", color: "green", padding: "10px"},
          obj2: { title: "查看详情", color: "blue", padding: "5px" },
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
    ------------------------------------ 添加 ------------------------------------------
      methods: {
        action(x, y) {
          console.log(x + y);
        },
      },
    -----------------------------------------------------------------------------------
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180742160.png][]

**index****.vue****（父）**

<template>
      <div>
    <Banner :img="img" :a="10" />
    <div>
          //<Btn :title="name" :color="'red'"/>
          //<Btn :title="'这是一个按钮'" :color="'blue'"/>
          //<Btn :obj="obj"/>
          <Btn :obj="obj2" :action="action" />
    ------------------------------------ 添加 ------------------------------------------
          <Btn :obj="obj2" :action="abc" />
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Button from "./Btn.vue"; 
    import Banner from "./Banner.vue"; 
    
    export default {
      data() {
    return {
          name: "提交",
          obj: {title: "查看详情", color: "green", padding: "10px"},
          obj2: { title: "查看详情", color: "blue", padding: "5px" },
          img: [require("@/assets/img/2.jpg"), 
                require("@/assets/img/1.jpg")],
        };
      },
      methods: {
        action(x, y) {
          console.log(x + y);
    },
    ------------------------------------ 添加 ------------------------------------------
        abc(x, y) {
          console.log(x - y);
        },
    -----------------------------------------------------------------------------------
    
      },
      components: {
        Btn: Button,
        Banner,
      },
    };
    </script>
    
    <style scoped>
    </style>

=====================================================================

**    index.vue**

<Btn :obj="obj" :event="action" />
        data(){
            return{
                obj:{title:'查看详情',color:'green',padding:'10px'}
            }
        }
        methods:{
            action(x,y){ //传入一个计算相加的函数
                console.log(x+y);
            }
    }

**    Btn.vue**

<button :style="{color:obj.color}" @click="send()">{
       {obj.title}}</button>
    // 接收父的参数：
    // 1、数组的方式
    props:['obj','event']
    methods:{
        send(){
            this.event(1,4) //调用父传入的方法
        }
    }
        // 2、对象的方式
    props: {
        obj:{
            title: String,
        		    color: String,
            		padding: String
        		},
        		event:Function //父传入子的函数
    }

## 2.父组件操作子组件($refs) ##

ref被用来给DOM元素或子组件注册引用信息，引用信息会根据父组件的$refs对象进行注册。

如果在普通DOM元素上使用，引用信息是元素，如果在子组件上，引用信息就是组件实例

**简单理解**：

1. 如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引,通过$refs可能获取到在子组件里定义的属性和方法。

2. 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$refs可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似

![20210716180848969.png][]

**index****.vue****（父）**

<template>
      <div>
    ------------------------------------ 添加 ------------------------------------------
        <h1 ref="h1">hello</h1>
    <button @click="change()">click</button>
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
    ------------------------------------ 添加 ------------------------------------------
        change() {
          this.$refs.h1.innerHTML = "123456";
    },
    -----------------------------------------------------------------------------------
      },
      components: { },
    };
    </script>
    
    <style scoped>
    </style>

![2021071618092731.png][]![20210716180928595.png][]

**index****.vue****（父）**

<template>
      <div>
    <h1 ref="h1">hello</h1>
    ------------------------------------ 添加 ------------------------------------------
        <input type="text" ref="input"/>
    -----------------------------------------------------------------------------------
    <button @click="change()">click</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
        change() {
          this.$refs.h1.innerHTML = "123456";
    ------------------------------------ 添加 ------------------------------------------
          this.$refs.input.focus();	//成为焦点
          this.$refs.input.style.background = "yellow";
    -----------------------------------------------------------------------------------
    },
      },
      components: { },
    };
    </script>
    
    <style scoped>
    </style>

![20210716180942221.png][]

**Btn****.vue****（子）**

**index****.vue****（父）**

<template>
      <div>
    <h1 ref="h1">hello</h1>
        <input type="text" ref="input"/>
    <button @click="change()">click</button>
    ------------------------------------ 添加 ------------------------------------------
        <Btn :title="'提交'" ref="btn" />
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    ------------------------------------ 添加 ------------------------------------------
    import Btn from "./Btn.vue"; 
    -----------------------------------------------------------------------------------
    export default {
      data() {
        return {};
      },
      methods: {
        change() {
          this.$refs.h1.innerHTML = "123456";
          this.$refs.input.focus();	//成为焦点
          this.$refs.input.style.background = "yellow";
    ------------------------------------ 添加 ------------------------------------------
          console.log(this.$refs.btn.name);	//拿子组件里面的属性
    -----------------------------------------------------------------------------------
    },
      },
      components: { 
    ------------------------------------ 添加 ------------------------------------------
        Btn,
    -----------------------------------------------------------------------------------
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716181010121.png][]//父组件操作子组件

**Btn****.vue****（子）**

<template>
      <button>{
       {title}}</button>
    </template>
    
    <script>
    export default {
      data() {
        return {
          name: "我是按钮",
        };
      },
      props: {
        title: {
          type: String,
          default: "按钮",
        },
      },
      methods: {
        send() {
          this.action(1, 2);
    },
    ------------------------------------ 添加 ------------------------------------------
        hander() {
          console.log(123);
    },
    -----------------------------------------------------------------------------------
      },
    };
    </script>

**index****.vue****（父）**

<template>
      <div>
    <h1 ref="h1">hello</h1>
        <input type="text" ref="input"/>
    <button @click="change()">click</button>
        <Btn :title="'提交'" ref="btn" />
      </div>
    </template>
    
    <script>
    import Btn from "./Btn.vue"; 
    export default {
      data() {
        return {};
      },
      methods: {
        change() {
          this.$refs.h1.innerHTML = "123456";
          this.$refs.input.focus();	//成为焦点
          this.$refs.input.style.background = "yellow";
          console.log(this.$refs.btn.name);		//拿子组件里面的属性
    ------------------------------------ 添加 ------------------------------------------
          console.log(this.$refs.btn.hander());	//拿子组件里面的方法	
    -----------------------------------------------------------------------------------
    },
      },
      components: { 
        Btn,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716181039319.png][]

=====================================================================

**index.vue**

<Btn :obj = "obj" ref='btn'/>
    <button @click="change()"> 改变</button >
    data(){
            return {
                obj: {title: '查看详情', color: 'green', padding: '10px'}
            }
        }
        methods: {
            change(){
                //操作子组件的属性和方法
                console.log(this.$refs.btn.sub);
                console.log(this.$refs.btn.action());
            }
    }

**    Btn.vue**

<button :style = "{color:obj.color}"> {
       {obj.title }} </>
    // 接收父的参数：
    // 1、对象的方式
        props: {
        obj: {
            title: String,
                color: String,
                    padding: String
        }
    }
    // 2、数组的方式
    props: ['obj']
    data(){
        return {
            sub: '我是子组件按钮',
        }
    },
    methods: {
        action(){
            console.log('我是子组件按钮')
        }
    }

## 3.子组件操作父组件 ($emit) ##

**实现子组件向父组件通信**

![20210716181124680.png][]

vm.$emit(event, arg)![20210716181130178.png][]

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

### （1）子组件传参父组件 ###

**    Btn.vue****（子）**

<template>
      <button :style="{color: obj.color}" @click="send()">{
       {obj.title}}</button>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: "我是按钮",
        };
      },
      props: {
        obj: {
          title: String,
          color: String,
          padding: String,
        },
      },
      methods: {
        send() {
          this.$emit('e-child','子要传给父的值')    //发射一个事件 把子的值传给父
        },
      },
    };
    </script>

**index.vue****（父）**

<template>
      <div>
        
        <Btn :obj="obj" @e-child="acceptSon" />
        {
       {name}}
      </div>
    </template>
    
    <script>
    import Btn from "./Btn.vue"; 
    export default {
      data() {
        return {
          name: "parent",
          obj: {title: "查看详情", 
                color: "green", 
                padding: "10px"},
        };
      },
      methods: {
        acceptSon(value) {
          //value就是子组件传过来的值
          console.log(value)
          this.name = value
        },
      },
      components: {
        Btn,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716181214872.png][]![20210716181216366.png][]![20210716181218217.png][]

====================================================================

**    index.vue****（父）**

< !-- @e-child 监听并接收参数-- >
    <Btn :obj="obj" @e-child="acceptSon" />	//通过e-child接收，也是事件
    data(){
            return {
                obj: {title: '查看详情', color: 'green', padding: '10px'}
            }
        }
        methods: {
            acceptSon(value){		//value就是子组件传过来的值
                
            }
    }

**    Btn.vue****（子）**

<button :style = "{color:obj.color}" @click="send()"> {
       {obj.title}} </button>
    // 接收父的参数：
    // 1、对象的方式
        props: {
        obj: {
            title: String,
                color: String,                
                padding: String
        }
    }
    -----------------------------------------------------------------------------------
    // 2、数组的方式
    props: ['obj']
        methods: {
            send(){
                this.$emit('e-child', '子要传给父的值')	//发射一个事件把子的值传给父
            }
        }

### （2）子组件操作父组件 （传入函数） ###

方法一：

**    Btn.vue****（子）**

<template>
      <button :style="{color: obj.color}" @click="send()">{
       {obj.title}}</button>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: "我是按钮",
        };
      },
      props: {
        obj: {
          title: String,
          color: String,
          padding: String,
    },
    ------------------------------------- 添加 -----------------------------------------
        event: Function, //父传入子的函数（限制为函数类型）
    -----------------------------------------------------------------------------------
      },
      methods: {
    send() {
    ------------------------------------- 关掉 -----------------------------------------
          // this.$emit('e-child','子要传给父的值')    //发射一个事件 把子的值传给父
    ------------------------------------- 添加 -----------------------------------------
          this.$emit("e-child", this.event); //子操作父的方法  把父的方法传入到子中处理
    },
        add() {},
    del() {},
    -----------------------------------------------------------------------------------
      },
    };
    </script>

**index.vue****（父）**

<template>
      <div>
    
    ----------------------------- 添加 :event="action" ---------------------------------
        <Btn :obj="obj" @e-child="acceptSon" :event="action" />
    -----------------------------------------------------------------------------------
        {
       {name}}
      </div> 
    </template>
    
    <script>
    import Btn from "./Btn.vue"; 
    export default {
      data() {
        return {
          name: "parent",
          obj: {title: "查看详情", 
                color: "green", 
                padding: "10px"},
        };
      },
      methods: {
    ------------------------------------- 添加 -----------------------------------------
        action() {	//父组件的方法
          this.name = "父组件的值";	
        },
    -----------------------------------------------------------------------------------
    acceptSon(value) {
    ------------------------------------- 关掉 -----------------------------------------
          //value就是子组件传过来的值
          console.log(value)
          this.name = value
    ------------------------------------- 添加 -----------------------------------------
          value();	//value是子传入的，如果是函数，调用value()
    -----------------------------------------------------------------------------------
        },
      },
      components: {
        Btn,
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210716181343989.png][]![20210716181347309.png][]

=====================================================================

**    index.vue****（父）**

<Btn :obj="obj" :event="action" @e-child="acceptSon" />
    data(){
            return {
                obj: { title: '查看详情', color: 'green', padding: '10px' }
            }
        }
        methods: {
            action(){ //父组件的方法
                this.name = '父组件的值';
            },
            acceptSon(res){ //
                //res()就是action函数
                res()
            }
    }

**    Btn.vue****（子）**

<button :style = "{color:obj.color}" @click="send()"> {
       {obj.title}} </button>
    // 接收父的参数：
    // 1、对象的方式
        props: {
        obj: {
            title: String,
                color: String,
                padding: String
        },
        event: Function //父传入子的函数
    }
    // 2、数组的方式
    props: ['obj', 'event']
    methods: {
        send(){
            this.$emit('e-child', this.event) //子操作父的方法 把父的方法传入到子中处理
        }
    }

2.方法二：

**.sync** 修饰符，作为一个编译时的语法糖存在，扩展为一个自动更新父组件属性的v-on监听器。

**    index.vue****（父）**

<Btn :obj="obj" :parentTitle.sync="title" />
        {
       {title}}
        data(){
            return {
                title: 'parent',
                obj: {title: '查看详情', color: 'green', padding: '10px'}
            }
    }

**    Btn.vue****（子）**

<button :style = "{color:obj.color}" @click="send()">{
       {obj.title}}</button>
    // 接收父的参数：
    // 1、对象的方式
        props: {
        obj: {
            title: String,
            color: String,
    	        padding: String
        }
    }
    // 2、数组的方式
    props: ['obj']
    methods: {
        send(){
            //相当于直接操作父属性，不用在父添加事件
            this.$emit('update:parentTitle', '子要传给父的值')
        }
    }

## 4.兄弟组件传参 ##

场景：

testA.vue和testB.vue二个子组件，

testA.vue获取到testB.vue的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4][] （vuex可与解决层级关系复杂情况）

比如祖先想要儿子的兄弟的儿子数据，这样很麻烦，vuex就相当于一个中间件

儿子把数据放进去，祖先直接从里面拿到

=====================================================================

**    index.vue**

<h1>父组件：{
       {title}} </h1>
    <testA :title="title"/>
    <testB @e-child="acceptSon"/> 
            methods: {
            acceptSon(res){ //接受testB子组件信息，同时传给testA
                this.title = res
            }
        }

**    testA.vue**

A组件：<button>{
       { title }}</button>
        props: {
            title: String
    }

**    testB.vue**

B组件：<input type="text" v-model="title" @input="send()" />
            data(){
            return {
                title: 'testB',
            }
        },
        methods: {
            send(){
                this.$emit('e-child', this.title) //发射一个事件 把子的值传给父
            }
        }

[20210716175925359.png]: https://img-blog.csdnimg.cn/20210716175925359.png
[20210716175926757.png]: /images/20221004/21f566ba36c64daf8277226e5c6ed461.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210716175928765.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ==,size_16,color_FFFFFF,t_70
[20210716175930232.png]: /images/20221004/ad2aec5681ae467ab30294fa549860fb.png
[20210716175943724.png]: /images/20221004/03b7fc2e82e0442c8b4cb1d5e8b2558f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/e74fb6577f0b4d5aae583322d995185b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221004/d631636f14304539b874134c08c71301.png
[20210716180159627.png]: /images/20221004/73d303fdf8c442b4b234e7315173c24c.png
[20210716180205954.png]: /images/20221004/83e4b88772084d77a52e6b5a58599ffe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221004/50c5d62abddb4232ac1b24532f90a454.png
[20210716180238694.png]: /images/20221004/fb9f9ae96d0e4e28911b7fff9cd7f4f2.png
[20210716180305830.png]: /images/20221004/a3dc93e9d0f84c6db4c6c4a5540a0099.png
[2021071618031257.png]: https://img-blog.csdnimg.cn/2021071618031257.png
[20210716180318283.png]: /images/20221004/c80c2ce5d8414c25a27959ab53eb2ef3.png
[20210716180435994.png]: /images/20221004/57dbf8d7dca741a89322dad0febc0f2b.png
[20210716180456119.png]: /images/20221004/f7201c7880da411d97bb38c416564537.png
[20210716180610649.png]: /images/20221004/a34167a04c9f4892be27b0f658ba7722.png
[20210716180631916.png]: /images/20221004/b386792ad84c4ee086d715cfbf24a0b9.png
[20210716180742160.png]: /images/20221004/a5a1317c9ff44cf8bf86951e56f237e7.png
[20210716180848969.png]: /images/20221004/b769d37dbbef422888c60425bb03c647.png
[2021071618092731.png]: https://img-blog.csdnimg.cn/2021071618092731.png
[20210716180928595.png]: /images/20221004/852a3b62df33447ab8acbb75966a60c8.png
[20210716180942221.png]: /images/20221004/863b993d571046d0953258545bb0363c.png
[20210716181010121.png]: /images/20221004/906ca334394e48a3bdff1b00e47626c1.png
[20210716181039319.png]: /images/20221004/dc4679db5eca49f2883b084e6b40a92f.png
[20210716181124680.png]: /images/20221004/6b3560302dca4f19bd93e7ad6e3cf5ce.png
[20210716181130178.png]: /images/20221004/f125b393a3f34aa687aa329ddfa6ab5a.png
[20210716181214872.png]: https://img-blog.csdnimg.cn/20210716181214872.png
[20210716181216366.png]: https://img-blog.csdnimg.cn/20210716181216366.png
[20210716181218217.png]: /images/20221004/1f4cfb09025a408ca217a3c97367eae0.png
[20210716181343989.png]: https://img-blog.csdnimg.cn/20210716181343989.png
[20210716181347309.png]: /images/20221004/d3a113d1d71c4917850b3e3728bf8d31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4]: /images/20221004/bf00442dd6ae45988011af80ff4f15ee.png