Vue-父子组件传值

使用prop方式：单向传递

1. 定义一个父子组件

		// 全局组件
		Vue.component("my-parent",{ // 父组件名称
			data(){
				return{
					msg:''
				}
			},
			template:"#parent",
			components:{
				"my-child":{  // 子组件名称
					props:['title'],
					data(){
						return{
							childtext:'这是my-child子组件'
						}
					},
					template:'#child' // 关联子模板
				}
			}
		})

2. 在子组件中申明一个属性: props:[‘title’]

components:{
    "my-child":{
        props:['title'],
            data(){
            return{
                childtext:'这是my-child子组件'
            }
        },
        template:'#child' // 关联子模板
    }
}

3. 在父模板中的子组件属性绑定一个动态值

<!--创建父模板文件-->
<template id="parent">
    <div>
        <input v-model="msg" />
        <p>这是my-parent父组件</p>
        <my-child :title="msg" />
    </div>		
</template>

4. prop类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise
}

5. 类型验证

props: { 
    // 类型检查：默认进行转换为Number,如查类型错误不显示
    id: Number,
        // 值多类型
    title: [String, Boolean],
    name: {
        type: String,
         required: true
    },
    address:{
         type:Object,
         default:'湖南长沙'
      }
}