1

具体的看代码中的注释

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>

陈平安
302 声望8 粉丝

好的问题比精彩的答案更重要!