父传子

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>

 

父传子

上一篇:1044 火星数字 (20 point(s))


下一篇:QWidget窗体中使用Q_OBJECT后无法添加背景图片或背景色