vue 父子组件传值

最新推荐文章于 2023-08-24 17:29:12 发布

L薛之谦

最新推荐文章于 2023-08-24 17:29:12 发布

阅读量695

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ldh1219/article/details/125624303

版权

vue 父子组件传值

1.父组件向子组件传值（props）

2.父组件调用子组件的方法（$refs）

3.子组件向父组件传值 ($emit)

1-----》父组件向子组件传值：

child组件


<template>
  <div class="child">
    <h1>
      {{ message }}
    </h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  props: {
    message: {
      type: String,
      default: "",
    },
    }
    or
    props: {
    message: {
        type: Array,
        default: ['foo','bar','baz']   //默认值
    }
    }，
    or
     props:["message"]
  created() {},
  methods: {
  
  },
  mounted() {},
};
</script>
<style scoped='less'>
</style>

parent组件


<template>
  <div class="parent">
    <h4>parent</h4>
    <childVue :message="msg"></childVue>
  </div>
</template>
<script>
import childVue from './child.vue';
export default {
  components:{
    childVue
  },
  data() {
    return {
      msg:'父组件给子组件的数据','
    };
  },
  created() {},
  methods:{

  },
  mounted() {},
};
</script>
<style scoped='less'>
.parent {
  margin: auto;
  width: 400px;
  height: auto;
 
}
</style>

效果图

在这里插入图片描述

2-----》父组件调用子组件的方法

child组件


<template>
  <div class="child">
    <h1>child</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },

  created() {},
  methods: {
    childhandle(value) {
      console.log(value);
    }
  }，
  mounted() {},
};
</script>
<style scoped='less'>
</style>

parent组件

<template>
  <div class="parent">
    <h4>parent</h4>
    <button @click="handle"> 点击</button>
    <p>父组件调用子组件的方法:   </p>
    <childVue ref="mychild"></childVue>
  </div>
</template>

<script>
import childVue from './child.vue';
export default {
  components:{
    childVue
  },
  data() {
    return {

    };
  },
  created() {},
  methods:{
    handle(){
      this.$refs.mychild.childhandle('1111')
    },
   
  },
  mounted() {},
};
</script>
<style scoped='less'>
.parent {
  margin: auto;
  width: 400px;
  height: auto;
 
}
</style>

效果图

在这里插入图片描述

3----》子组件向父组件传值

child组件


<template>
  <div class="child">
    <h1>child</h1>
    <button v-on:click="handleclick">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "子组件传递给父组件的数据值",
    };
  },
  created() {},
  methods: {
    handleclick() {
      this.$emit("gethandleclick", this.value);
    },
  },
  mounted() {},
};
</script>
<style scoped='less'>
</style>

parent组件

<template>
  <div class="parent">
    <h4>parent</h4>
    <childVue @gethandleclick="gethandleclick"></childVue>
    <p>{{value}}</p>
  </div>
</template>

<script>
import childVue from './child.vue';
export default {
  components:{
    childVue
  },
  data() {
    return {
      value:''
    };
  },
  created() {},
  methods:{
    gethandleclick(val){
        this.value=val
        console.log(this.value);
    }
  },
  mounted() {},
};
</script>
<style scoped='less'>
.parent {
  margin: auto;
  width: 400px;
  height: auto;
 
}
</style>