Vue2父子传值

前端小程

已于 2024-08-21 09:36:35 修改

阅读量267

点赞数 4

文章标签：前端 vue.js

于 2024-08-20 11:26:31 首次发布

本文链接：https://blog.csdn.net/CSSAJBQ_/article/details/141324018

版权

Vue2父子传值

一、父子组件传值的多种方式

1.1父组件调用子组件

通过props
通过ref
通过$children

1.2子组件调用父组件

通过$emit
通过provide/inject
通过$parent

二、父组件调用子组件——使用步骤

1.父组件通过 props 传值，可传属性，方法

代码如下（示例）：

父组件

<template>
  <div>
    <h1>父组件</h1>
    <Son1 :parentMethod="mytMethod" :isShow="isShow" />
  </div>
</template>
  
  <script>
import Son1 from "./components/son1.vue";

export default {
  name: "test",
  components: {
    Son1,
  },
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    mytMethod() {
      console.log("触发了父组件的方法");
      this.isShow = !this.isShow;
    },
  },
};
</script>

子组件

<template>
  <div>
    <h4>子组件</h4>
    <button @click="parentMethod">点我</button>
    <div v-if="isShow">控制显示</div>
  </div>
</template>

<script>

export default {
    props:{
        parentMethod:{
            type:Function,
            default:()=>{}
            
        },
        isShow:{
            type:Boolean,
            default:false
        }
    }

}
</script>

2.父组件通过 ref 获取子组件的实例，直接调用子组件的方法。

代码如下（示例）：

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <button @click="changeSon1">点我修改子组件显示列表</button>
    <Son1 ref="son1"  />
  </div>
</template>
  
  <script>
import Son1 from "./components/son1.vue";

export default {
  name: "test",
  components: {
    Son1,
  },

  methods: {
   
    changeSon1(){
      let list = ['我是新的列表','哈哈哈']
      this.$refs.son1.setListData(list)
    }
  },
};
</script>

子组件：

<template>
  <div>
    <h4>子组件</h4>
    <ul v-for="(item, index) in list" :key="index">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["默认"],
    };
  },
  methods: {
    setListData(listData) {
      this.list = listData;
    },
  },
};
</script>

3.父组件通过 $children 获取子组件的实例的集合。

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <button @click="changeMsg">点我更新子组件</button>
    <Son1 />
    <Son2 />
  </div>
</template>
  
  <script>
import Son1 from "./components/son1.vue";
import Son2 from "./components/son2.vue";

export default {
  name: "test",
  components: {
    Son1,
    Son2,
  },
  data() {
    return {
    };
  },                                  
  methods:{
    changeMsg(){
      console.log(this.$children);//[VueComponent, VueComponent] 子组件实例集合
      this.$children[0].getData();
      this.$children[1].getData();
      this.$children[0].msg ='111'
      console.log(this.$children[0].msg );
      console.log(this.$children[1].msg);

    }
  }
};
</script>

子组件：

<template>
  <div>
    <h4>子组件1</h4>
   
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name:"son1",
  data() {
    return {
      msg: "子组件1默认",
    };
  },
  methods: {
    getData() {
      this.msg = "子组件1更新";
    },
  },
};
</script>

<template>
  <div>
    <h4>子组件2</h4>
   
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name:"son2",
  data() {
    return {
      msg: "子组件2默认",
    };
  },
  methods: {
    getData() {
      this.msg = "子组件2更新";
    },
  },
};
</script>

三、子组件调用父组件——使用步骤

1.子组件通过 $emit 触发父组件方法

代码如下（示例）：

子组件

<template>
  <div>
    <h4>子组件</h4>
    <button @click="changeM">点我修改父组件msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    changeM() {
      this.$emit("changeMsg", "新的了！辛德瑞拉");
    },
  },
};
</script>

父组件

<template>
  <div>
    <h1>父组件</h1>
    <div>{{ msg }}</div>
    <Son1 @changeMsg="changeMsg" />
  </div>
</template>
  
  <script>
import Son1 from "./components/son1.vue";

export default {
  name: "test",
  components: {
    Son1,
  },
  data() {
    return {
      msg: "父組件默认值",
    };
  },
  methods: {
    changeMsg(newVal) {
      this.msg = newVal;
    },
  },
};
</script>

2.provide/inject

代码如下（示例）：

父组件

<template>
  <div>
    <h1>父组件</h1>

    <Son1 />
  </div>
</template>
  
  <script>
import Son1 from "./components/son1.vue";

export default {
  name: "test",
  components: {
    Son1,
  },
  data() {
    return {
      parentMsg:"eee"
    };
  },
  provide() {
    return {
      myMethod: () => this.myMethod(),//响应式方法，绑定this
      parentMsg: () => this.parentMsg,//响应式的值，绑定this
      parentColor: 'red',//非响应式的值
    };
  },
  methods:{
    myMethod(){
      console.log("组件方法被调用");
      this.parentMsg +="a"
    
    }
  }

子组件：

<template>
  <div>
    <h4>子组件</h4>
    <button @click="myMethod">点我</button>
   响应式： {{parentMsg()}}
  非响应式：  {{parentColor  }}
  </div>
</template>

<script>
export default {
  inject: ["myMethod",'parentMsg','parentColor'],
  data() {
    return {};
  },
  methods: {},
};
</script>

3.$parent 子组件获取父组件的数据、调用父组件的方法

父组件

<template>
  <div>
    <h1>父组件</h1>

    <Son1 />
  </div>
</template>
  
  <script>
import Son1 from "./components/son1.vue";

export default {
  name: "test",
  components: {
    Son1,
  },
  data() {
    return {
      parentMsg:"父组件的值"
    };
  },                                  
  methods:{
    myMethod(){
      console.log("父组件方法被调用");
      
    
    }
  }
};
</script>

子组件：

<template>
  <div>
    <h4>子组件</h4>
  <button @click="getData">点我</button>
  <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg:"子组件默认"
    };
  },
  methods: {
    getData(){
      this.$parent.myMethod()
      this.msg = this.$parent.parentMsg;
    }
  },
};
</script>