Vue实战之组件(Component)

12.1 组件作用

组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据不能业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。

12.2 组件使用

12.2.1 全局组件注册

说明:全局组件注册给Vue实例,日后可以在任意Vue实例的范围内使用该组件

//1.开发全局组件
Vue.component('login',{
template:'<div><h1>用户登录</h1></div>'
});
//2.使用全局组件在Vue实例范围内
<login></login>

# 注意:
           1.Vue.component用来开发全局组件参数1: 组件的名称参数2: 组件配置{} template:''用来书写组件的html代码 template中必须有且只有一个root元素
           2.使用时需要在Vue的作用范围内根据组件名使用全局组件
           3.如果在注册组件过程中使用驼峰命名组件的方式在使用组件时必须将驼峰的所有单词小写加入-线进行使用

12.2.2 局部组件注册

说明:通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加

- 第一种开发方式

         //局部组件登录模板声明
        let login ={   //具体局部组件名称
            template:'<div><h2>用户登录</h2></div>'
        };
        
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components:{  //用来注册局部组件
                login:login  //注册局部组件
            }
        });
    
         //局部组件使用 在Vue实例范围内
         <login></login>

- 第二种开发方式

//1.声明局部组件模板  template 标签 注意:在Vue实例作用范围外声明
        <template id="loginTemplate">
            <h1>用户登录</h1>
        </template>
      
      //2.定义变量用来保存模板配置对象
          let login ={   //具体局部组件名称
              template:'#loginTemplate'  //使用自定义template标签选择器即可
          };
      
      //3.注册组件    
          const app = new Vue({
              el: "#app",
              data: {},
              methods: {},
              components:{  //用来注册局部组件
                  login:login  //注册局部组件
              }
          });
      
       //4.局部组件使用 在Vue实例范围内
           <login></login>

12.3 Prop的使用

作用:props用来给组件传递相应静态数据或者是动态数据的

12.3.1 通过在组件上声明静态数据传递给组件内部

    //1.声明组件模板配置对象
        let login = {
            template:"<div><h1>欢迎:{
   
   { userName }} 年龄:{
   
   { age }}</h1></div>",
            props:['userName','age']  //props作用 用来接收使用组件时通过组件标签传递的数据
        }
    
    //2.注册组件
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components:{
                login //组件注册
            }
        });
    
    //3.通过组件完成数据传递
        <login user-name="小陈" age="23"></login>

    # 总结:
                1.使用组件时可以在组件上定义多个属性以及对应数据
                2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{
   
   { 属性名 }} 方式获取组件中属性值

12.3.2 通过在组件上声明动态数据传递给组件内部

  //1.声明组件模板对象
        const login = {
            template:'<div><h2>欢迎: {
   
   { name }} 年龄:{
   
   { age }}</h2></div>',
            props:['name','age']
        }
     
    //2.注册局部组件
        const app = new Vue({
            el: "#app",
            data: {
                username:"小陈陈",
                age:23
            },
            methods: {},
            components:{
                login //注册组件
            }
        });
    
    //3.使用组件
         <login :name="username" :age="age"></login>  //使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

12.3.3 prop的单向数据流

单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。---摘自官网

12.4 组件中定义数据和事件使用

1. 组件中定义属于组件的数据

    //组件声明的配置对象
        const login = {
            template:'<div><h1>{
   
   { msg }} 百知教育</h1><ul><li v-for="item,index in lists">{
   
   { index }}{
   
   { item }}</li></ul></div>',
            data(){   //使用data函数方式定义组件的数据   在templatehtml代码中通过插值表达式直接获取
                return {
                    msg:"hello",
                    lists:['java','spring','springboot']
                }//组件自己内部数据
            }
        }

2.组件中事件定义

     const login={
            template:'<div><input type="button" value="点我触发组件中事件" @click="change"></div>',
            data(){
                return {
                    name:'小陈'
                };
            },
            methods:{
                change(){
                    alert(this.name)
                    alert('触发事件');
                }
            }
        }

# 总结
       1.组件中定义事件和直接在Vue中定义事件基本一致直接在组件内部对应的html代码上加入@事件名=函数名方式即可
       2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例

12.5 向子组件中传递事件并在子组件中调用改事件

在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用

   //1.声明组件
        const login = {
            template:"<div><h1>百知教育 {
   
   { uname }}</h1> <input type='button' value='点我' @click='change'></div>",
            data(){
                return {
                    uname:this.name
                }
            },
            props:['name'],
            methods:{
                change(){
                    //调用vue实例中函数
                    this.$emit('aaa');  //调用组件传递过来的其他函数时需要使用 this.$emit('函数名调用')
                }
            }
        }
        
     //2.注册组件
            const app = new Vue({
            el: "#app",
            data: {
                username:"小陈"
            },
            methods: {
                findAll(){  //一个事件函数  将这个函数传递给子组件
                    alert('Vue 实例中定义函数');
                }
            },
            components:{
                login,//组件的注册
            }
        });
    
    //3.使用组件
        <login  @find="findAll"></login>    //=====> 在组件内部使用  this.$emit('find')

---