vue 传值方法总结

最新推荐文章于 2022-09-24 23:33:17 发布

辛望_上下求索

最新推荐文章于 2022-09-24 23:33:17 发布

阅读量125

点赞数

分类专栏： Vue 从入门到精通(问题整理) 文章标签： vue javascript vue.js

本文链接：https://blog.csdn.net/qq_42877027/article/details/116141869

版权

Vue 从入门到精通(问题整理) 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、父传子

在父组件的子组件标签上绑定一个属性，挂载要传输的变量
在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性名”] props:{属性名:数据类型}

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son :data='name'></son> 
  </div>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>

//子组件
<template>
  <div>{{data}}</div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  props:["data"],
};
</script>

二、子传父

在父组件的子组件标签上自定义一个事件，然后调用需要的方法
在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </div>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(){
      alert('子传父')
    }
  },
};
</script>

//子组件
<template>
  <div>
    <button @click="lcalter">点我</button>
  </div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  methods: {
    lcalter(){
      this.$emit('lcclick')//通过emit来触发事件
    }
  },
};
</script>