关于vue中父组件传值给子组件

最新推荐文章于 2024-04-30 10:47:34 发布

原创最新推荐文章于 2024-04-30 10:47:34 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在这里插入图片描述
父组件页面 ----- list.vue：

<template>
  <div class="list">
      我是父组件页面
      <!--3、 使用子组件 -->
      <EditList :parentVal="msg"/>
  </div>
</template>

<script>
// 1、引入子组件
import EditList from '@/components/EditList'
export default {
  name: 'List',
  data () {
    return {
      msg: '我是来自父组件中的值'
    }
  },
  components:{
    //2、 注册子组件
    EditList
  }
}
</script>

子组件页面-----EditeList.vue:

<template>
  <div class="editList">
    <span style="color:red">子组件接收到父组件中传递的值是：</span>
    {{parentVal}}
  </div>
</template>

<script>
export default {
  name: 'EditList',
  props:{
    parentVal:{
      type:String
    }
  }
}
</script>