具体的看代码中的注释
App.vue(父组件)
<style>
</style>
<template>
<div id="app">
<h1>Hello Vue</h1>
<!--在组件中绑定name属性,name值在父组件中赋值-->
<modal-tip
:name="name"
></modal-tip>
</div>
</template>
<script>
//将子组件引入父组件
import modalTip from './modalTip.vue'
export default {
name: 'app',
//在components属性中注册局部组件(区别于全局组件),供父组件调用
components:{
modalTip
},
data () {
return {
//对name进行赋值
name:'zqz'
}
}
}
</script>
modalTip.vue(子组件)
<style>
</style>
<template>
<p>{{ name }}</p>
</template>
<script>
export default {
props:{
//对来自于父组件的值进行校验(体现出严谨性)
name:{
//校验类型
type:String,
//设置默认值
default:'zqz',
//校验是否必须
required:true,
}
},
name:'modalTip',
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。