首页 > 其他 > 详细

父传子

时间:2021-09-01 23:01:39      阅读:15      评论:0      收藏:0      [点我收藏+]

1.在父组件import子组件

2.挂载

3.在占位符中v-bind传入数据

4.子组件export default中props引入值

<!-- 简单数据类型message传值时复制的是对象,复杂数据类型userinfo引用的是数据地址 -->

父App.vue

<template>
  <div>
    <!-- 简单数据类型message传值时复制的是对象,复杂数据类型userinfo引用的是数据地址 -->
    <props :msg="message" :user="userinfo"></props>
  </div>
</template>
<script>
import props from ‘./views/prop.vue‘
export default {
  data() {
    return {
      message:‘Hello cfy‘,
      userinfo:{name:‘xj‘,age:18}
    }
  },
?
components:{
props
},
?
</script>
?
?

子prop.vue

<template>
   <div>
       <h3>Props传值组件</h3>
       <p>msg的值{{msg}}</p>
       <p>user的值{{user}}</p>
   </div>
</template>
<script>
export default {
   props:[‘msg‘,‘user‘],
  data() {
     return {
    }
  },
</script>

 

父传子

原文:https://www.cnblogs.com/ajaXJson/p/15207306.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!