Vue 基础 day03

定义Vue 组件

什么是组件：组件的出现，就是为了拆分 Vue 实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件；

组件化和模块化的不同：

• 模块化：是从代码逻辑的角度进行划分的；方便代码的分层开发，保证每个功能模块的职能单一；
• 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

全局定义组件的三种方式

1. 使用 Vue.extend 配合 Vue.component 方法

// 定义
var com = Vue.extend({
    template: '
创建了一个H3
'  // 通过 template 属性 指定了组件要展示的属性
});
// 使用 Vue.component ('组件的名称', 创建出来的组件模板对象) 如果组件名是驼峰命名引用时需要加 -
Vue.component('myCom', com)

Vue.component('myCom', Vue.extend({ // 缩写
    template: '
创建了一个H3
'
}));

1. 直接使用 Vue.component 方法

Vue.component('myCom', {
   template: '
直接使用 component 创建的全局组件
123
' 
});

1. 使用 Vue 提供的 template 标签 并结合 Vue.component 方法

Vue.component('myCom', {
    template: '#temp'
});

注意: 组件中的 DOM 结构, 有且只能有唯一的根元素(Root Element) 来进行包裹

定义私有组件

var vm = new Vue({
    el: '#app',
    components: {
        myCom: {
            template: '可以使用模板, 也可以只写表标签,规则与上述一致'
        }
    }
});

组件中的 data 和 methods

data

// 组件中可以有自己的 data 但是必须是一个方法, 还要 return 一个对象
Vue.component('myCom', {
    template: '
调用方式和 Vue 实例一致: {{ msg }}
',
    data: function () {
        return {
            msg: '组件中的data'
        }
    }
});

methods

Vue.component('myCom', {
   template: '
{{ msg }}
',
   data: function () {
       return {msg : 0};
   },
   methods: {
    increment () {
        this.msg += 1;
    }   
   }
});

切换组件的两种方式

使用 flag 标识符 结合v-if v-else 指令切换组件

// Vue 实例  此方法对于数量有一定缺陷
Vue.component('login', {
    template: '
假设这是登录的组件
'
});
Vue.component('register', {
    template: '
假设这是注册的组件
'
});
var vm = new Vue({
    el: '#app',
    data: { flag = true }
});

使用 component 标签, 来引用组件, 并通过 :is 属性指定要加载的组件

Vue.component('login', {
   template: '
假设这是登录的组件
' 
});
Vue.component('register', {
   template: '
假设这是注册的组件
' 
});
var vm = new Vue({
    el: '#app',
    data: { comName: 'login' }
});

组件过渡动画

.v-enter, .v-leave-to {
    opacity: 0;
    transform: translateX(80px);
}
.v-enter-active, .v-leave-active {
    transition: all 0.4s ease;
}

父组件向子组件传递值

var vm = new Vue({
    el: '#app',
    data: {
        msg: '这是父组件的内容'
    },
    components: 
        son: {
            // 3: 通过 {{ parentmsg }} 的方式调用父组件中的值
            template: '这是子组件的内容 -- {{ parentmsg }}', 
        },
        // 注意: props 是只读的, 虽然可以修改, 但是会报错
        props: ['parentmsg'], // 2: 再通过 props 定义父组件传过来的值
});

子组件向父组件传值

1. 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发给父组件的数据，在调用方法的时候当做参数传递过去；
2. 父组件将方法的引用传递给子组件，其中，getMsg 是组件中 methods 中定义的方法名，func 是子组件调用传递过来方法时候的方法名称
3. 子组件内部通过 this.$emit('方法名', 要传递的数据) 方式, 来调用组件中的方法, 同时把数据传递给父组件使用

var vm = new Vue({
  el: '#app',
  data: { fromChild: null },
  methods: {
    getMsg(param) {
      this.fromChild = param;
    }
  },
  components: {
    son: {
      template: '#tmpl',
      methods: {
        myclick() {
          this.$emit('func', this.child);
        } 
      },
      data() {
        return {
          child: { name: 'son'}
        };
      },
    }
  }
});

使用 this.$refs 获取元素和组件

    
    
    
 这是一个 h1