Vue中组件之间的传值

最新推荐文章于 2024-05-17 14:32:46 发布

loveAsuka_

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量33

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_52182385/article/details/128572528

版权

父组件在调用子组件时，添加属性给子组件

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App" :newMsg="AppNewmsg"/>
</template>
<script>
import  newWorld from './components/newWorld.vue'

export default {
  name: 'App',
  components: {
    newWorld
  },
  data () {
    return {
      AppNewmsg: "111111111111111"
    }
  }
}
</script>

子组件中使用props接收

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>新增传值：{{newMsg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'newWorld',
  props: {
    msg: String,
    newMsg: String
  }
}
</script>