vue props父组件传参到子组件

 props 实现组件传参

app.vue

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <MyComponent  :title="title" :age="age" :names="names" :names1="names1"/>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import MyComponent from './components/MyComponent.vue';
export default {
  name: 'App',
  data(){
    return{
      title:"我是标题",
      age:20,
      names:["11","anc","kukude"],
      names1:{title:1,name:2,age:3}
    }
  },
  components: {
    // HelloWorld,
    MyComponent
}
}
</script>
<style>
</style>

MyComponent.vue

<template>
 <h3> prop传递数据</h3>
  <p>{{ title }}</p>
  <p>age={{ age }}</p>
  <ul>
    <li v-for="(item,index) in names" :key="index">{{ item }}
    </li>
  </ul>
  {{names1}}
</template>

<script>
export default{
  name: 'MyComponent',
  props:{
    title:{
      type:String,
      default:"1"
    },
    age:{
      type:Number,
      default:0
    },
    names:{
      type:Array,   // 数组和对象必须使用函数进行返回
      default:function(){
        return []
      }
    },
    names1:{
      type:Object,   // 数组和对象必须使用函数进行返回
      default:function(){
        return {}
      }
    }，
    isPublished: Boolean,
    ca1lback: Function
  }
}
</script>
<style scoped>
</style>