编程宝库 - 技术改变世界

编程宝库

Search

Vue编程技术

Vue如何利用自定义指令实现鼠标拖动元素效果

Vue.js状态管理及SSR解析如何实现

Vue组件传值的常用方式有哪些

本文讲解"Vue组件传值的常用方式有哪些"，希望能够解决相关问题。

第一种：父向子传值

父向子传值意思就是要把父组件里的值传递给子组件，方法是在子组件内部自定义一个props属性，通过props属性来完成父子组件之间的数据传输。

新建文件导入结构

首先我们在components文件夹之下新建两个文件分别是Father.vue和Son.vue，并在这两个文件中通过shift + "<" 键快速生成结构，如图

Vue组件传值的常用方式有哪些

引入注册使用子组件

第二步，我们把Son作为子组件引入进父组件，并完成注册以及在template模板里使用Son的实例

<template>

<div class="box2">
  <!-- 使用Son的实例 -->
  <Son></Son>
  </div>

</template>

<script>
// 导入Son构造函数
import Son from '@/components/Son.vue'

export default {
  // 在component中完成注册
  components: {
    Son,
  },
}
</script>
<style lang="less"></style>

注意：这里style括号内设置lang="less"，代表我们可以在style样式结构中使用less语句

子组件内部代码完善

第三步我们要在Son组件中完成我们自己的代码书写，首先我们可以在template模板中定义一个box盒子，里面放入几个标签，并在其内部放入插值表达式。接着我们要在子组件的导出模块中定义一个props自定义属性，这里我们采用数组的形式在其内部定义两个属性分别是'msg' 和 'age', 代码如下

<template>
  <div class="box">
    <h3>
      我是子组件，父组件给我传递的值是 ---{{ msg }}, 我今年
      <h4>{{ age }}</h4>
      岁啦
    </h3>
  </div>
</template>

<script>
export default {
  props: ['msg', 'age'],
}
</script>

<style lang="less">
.box {
  h3 {
    color: pink;
  }
  h4 {
    color: skyblue;
  }
}
</style>

父组件内部代码完善

在父组件中，我们需要在data区域中返回两个值，如图

Vue组件传值的常用方式有哪些

同时在template模板中，我们可以定义一个标签，在其内部放入一个插值表达式检验父组件自身是否已经正确拿到值，

如图：

Vue组件传值的常用方式有哪些

同时，在Son实例中，我们将利用v-bind方法给它动态绑定属性，属性名就是Son构造函数中的props自定义属性，值就是Father中data内部定义的值

代码如下：

<template>
  <div class="box2">
    <!-- 使用Son的实例 -->
    <h2>我是父组件，我自身的值是--{{ dd }}</h2>
    <Son :msg="dd" :age="year"></Son>
  </div>
</template>

<script>
// 导入Son构造函数
import Son from '@/components/Son.vue'

export default {
  // 在component中完成注册
  components: {
    Son,
  },

  data() {
    return {
      dd: '加也加也',
      year: 15,
    }
  },
}
</script>

<style lang="less">
.box2 {
  // 父组件自身内部标签
  h2 {
    color: orange;
  }
}
</style>