Vue中组件通信：父传子props

最新推荐文章于 2024-08-09 11:20:59 发布

Sinornor

最新推荐文章于 2024-08-09 11:20:59 发布

阅读量40

点赞数

分类专栏： Vue中的组件通信文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38782335/article/details/129950677

版权

Vue中的组件通信专栏收录该内容

4 篇文章 0 订阅

订阅专栏

props

父组件使用自定义属性，然后子组件使用props

Vue2中

父组件：

<template>
  <div id="app">
    <TodoItem :msg="a + b"></TodoItem>
    <TodoItem v-bind:msg="msg" :msg2="msg2"></TodoItem>
  </div>
</template>

<script>
import TodoItem from './components/so.vue'

export default {
  name: 'App',
  components: {
    TodoItem
  },
  data() {
    return {
      a: '我是组件1',
      b: '我是组件2',
      msg: '我是组件' + Math.random(),
      msg2: '我是组件2' + Math.random()
    }
  },
}
</script>

<style>
#app {
  margin: 20px auto 20px 20px;
}
</style>

子组件：

<template>
    <div class="so">
        <p>{{ msg }} {{ msg2 }}</p>
    </div>
</template>

<script>
export default {
    name: "todo-item",
    props: ['msg', 'msg2']
}
</script>

<style scoped>

</style>

Vue3中

父组件：

<template>
  <TodoItem :msg="a + b"></TodoItem>
  <TodoItem :msg="msg" :msg2="msg2"></TodoItem>
</template>

<script>
import TodoItem from './components/so'
import { ref } from 'vue'

export default {
  name: 'App',
  components: {
    TodoItem
  }
}
</script>

<script setup>
  const a = ref('123')
  const b = ref('234')
  const msg = ref('我是组件1' + Math.random())
  const msg2 = ref('我是组件2' + Math.random())
</script>

<style>
#app {
  margin: 20px auto 20px 20px;
}
</style>

子组件：

<template>

  <div class="so">
    <p>{{ msg }}{{ msg2 }}</p>
  </div>

</template>

<script>
export default {
    name: "todo-item",
    props: ['msg', 'msg2']
}
</script>

<script setup>

</script>
<style scoped>

</style>