0
点赞
收藏
分享

微信扫一扫

08 组件数据传递

田妞的读书笔记 2022-03-26 阅读 60
vue.js前端

1.父传子——通过props传值

实际上父传子 就是通过在 父级组件使用中传自定义属性,子级通过关键字props 来接收使用

知识点

注意是键值对传值 父级传一个自定义属性 属性值为data数据 子级接收的和使用的都是属性名的值

注意 props 的格式 是一个数组 数组里是传过来的属性名

注意 props是一个单独的模块 不在data 里 也不在方法里

注意 父传子的属性名前要加 : v-bind

//子组件 child
<template>
    <div>
        <p>{{data}}</p>
    </div>
</template>
<script>
export default {
    name:"child",
    props: ['data'],
}
</script>
//父组件
<template>
  <div id="app">
    <child :data="childdata"></child>
  </div>
</template>

<script>
import child from "./components/chid.vue"
export default {
  name: 'App',
  components: {
    child
  },
  data() {
    return {
      childdata:"abcdefg"
    }
  }
}
</script>

2.子传父——通过 this.$emit传值

原理是 子集可以通过 this.$emit 访问到父级的自定义方法,并传值。

父级通过自己的自定义方法获得子级传来的值并储存到data中

知识点

父级通过自定义事件传值 需要在div中的子组件上定义一个自定义事件,并把事件的值写为一个普通事件

子级通过调用this.$emit方法时 记得方法名为父级的自定义事件名 并且记得加==“”==号

//子组件
<template>
  <div>
    <button @click="setchild" >点击获取父组件值</button>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {
      childdata: "child data",
    };
  },
  methods: {
    setchild() {
      this.$emit("myevent", this.childdata);
    },
  },
};
</script>
//父组件
<template>
  <div id="app">
    <child  @myevent="getchild"></child>
    <p>{{getchilds}}</p>
  </div>
</template>

<script>
import child from "./components/chid.vue"
export default {
  name: 'App',
  components: {
    child
  },
  data() {
    return {
      getchilds:''
    }
  },
  methods: {
    getchild(data){
      this.getchilds = data
      console.log(data)
    }
  },
}
</script>
举报

相关推荐

0 条评论