vue学习笔记5

1.组件组成

一个.vue文件是一个单文件组件（SFC）。

<template>
    <div class="container">{{ message }}</div>
    </template>
    <script>
    
    export default{
      data(){
        return{
          message:"组件的组成"
        }
      }
    
    
    }
    
    </script>
    
    <style scoped>
    .container{
      color: red;
      font-size: 30px;
    }
    </style>    

组件使用

<template>

<!-- 3.显示组件   -->
<MyComponent/>
</template>



<script>
//1.引入组件
import MyComponent from './components/MyComponent.vue';
export default{
  //2.注册组件
  components:{
    MyComponent

  }
}
</script>

<style scoped></style>

2.组件注册

全局注册：在main.js中注册，然后就可以全局使用了。
main.js代码

import { createApp } from 'vue'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'

const app=createApp(App)
//在这中间写组件的注册
app.component("HelloWorld",HelloWorld)
app.mount('#app')

在App.vue中使用

<template>

  <HelloWorld/>
</template>


<script>

export default{
  components:{
    

  }
}
</script>

<style scoped></style>

3.组件传递数据

props:父传子，需要先在父组件中定义变量属性然后在子组件中通过props接收。
Parent.vue中的代码如下：

<template>

    <h3>Parent</h3>
    <br/>
    <Child title="Parent传递数据"/>
    </template>
    
    
    
    <script>
    //1.引入组件
    import Child from './Child.vue';
    export default{
        data(){
            return{

            }
        },
      //2.注册组件
      components:{
        Child
    
      }
    }
    </script>
    
    <style scoped></style>

Child.vue的代码如下

<template>

    <h3>Parent</h3>
    <br/>
    <Child :title="message"/>
    </template>
    
    
    
    <script>
    //1.引入组件
    import Child from './Child.vue';
    export default{
        data(){
            return{
                message:"Parent传递数据"

            }
        },
      //2.注册组件
      components:{
        Child
    
      }
    }
    </script>
    
    <style scoped></style>

传递数字类型、数组类型、对象类型：

<template>

    <h3>Parent</h3>
    <br/>
    <Child :title="message" :age="age" :names="names" :userInfo="userInfo"/>
    </template>
    
    
    
    <script>
    //1.引入组件
    import Child from './Child.vue';
    export default{
        data(){
            return{
                message:"Parent传递数据",
                age:15,
                names:["张三","李四","王五"],
                userInfo:{
                    "name":"tom",
                    "addr":"beijing"
                }
            }
        },
      //2.注册组件
      components:{
        Child
    
      }
    }
    </script>
    
    <style scoped></style>

组件传递Props校验：类型校验、默认值（不传时显示）、必传校验
Parent.vue中的代码如下：

<template>

    <h3>Parent</h3>
    <br/>
    <Child  :title="title":age="age" />
    </template>
    
    
    
    <script>
    //1.引入组件
    import Child from './Child.vue';
    export default{
        data(){
            return{
                title:"标题",
                age:1,
                names:["张三","李四","王五"]                
            }
        },
      //2.注册组件
      components:{
        Child
    
      }
    }
    </script>
    
    <style scoped></style>

Child.vue中的代码如下：

<template>

    <h3>Child</h3>
    <br/>
    <p> {{title}}</p>
    <p> {{age}}</p>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{item}}</li>
    </ul>

    <p>{{userInfo.name}}</p>
    <p>{{userInfo.addr}}</p>
    
   

    </template>
    
    
    
    <script>
    
    export default{
        data(){
            return{

            }
        },
        props:{
            title:{
                type:[String,Number,Array,Object],
                required:true
            },
            age:{
                type:[Number],
                // 数字和字符可以直接default,但是如果是数组和对象必须通过工厂函数返回默认值
                default:0
            },
            names:{
                type:[Array],
                default(){
                    return ["空"]
                }
            },
            userInfo:{
                type:[Object],
                default(){
                    return {"name":"test","addr":"beijing"}
                }
            }
        }
    }
    </script>
    
    <style scoped></style>