Vue组件间通信——父组件到子组件

Error_exception_worn

已于 2022-10-18 23:31:00 修改

阅读量97

点赞数

文章标签： vue.js javascript 前端

于 2022-10-18 23:26:15 首次发布

本文链接：https://blog.csdn.net/hssjsh/article/details/127398906

版权

Vue.js 父子组件数据传递 v-bind props

关键词由CSDN通过智能技术生成

当父组件向子组件传递数据时，只需要在子组件添加一个自定义的属性，值是想要传递的数据，子组件需要在props节点中声明一个值用于接收。

使用v-band绑定在属性上表示引号内部的部分是一个表达式，会将引号内的值进行计算后再进行赋值，最明显的例子就是当传递数字的时候，用普通的变量形式会传递一个字符串的12，使用v-bind指令对属性进行绑定后就是一个int数字类型的12

props是一个数组，内部存储的值对应父组件传递给子组件的值

可以传递字符串字面值，也可以传递变量存储的值。

父组件的内容

<template>
  <div id="app">
    <CustomComponents :value="value" value2="你好世界" :value3="12"></CustomComponents>
  </div>
</template>

<script>

import CustomComponents from "@/components/CustomComponents";

export default {
  name: 'App',
  components: {
    CustomComponents
  },
  data(){
    return {
      value:'来自父组件的数据'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件的内容

<!--实现父组件向子组件进行通信-->
<template>
  <p>第一个数据：{{value}}</p>
  <p>第二个数据：{{value2}}</p>
  <p>第三个数据：{{value3}}</p>
</template>

<script>
export default {
  name: "Custom_Components",
<!--这个数组用来声明接收从父组件传递进来的值-->
  props:['value','value2','value3']
}
</script>

<style scoped>

</style>