定义

全局定义

注意：

• 组件名注册是可以用驼峰命名，但引用组件时需要改全小写，字母间 “-” 隔开
• 组件内的 data 是个函数，且返回一个对象。Vue 实例对象中的 data 则直接是个对象。需要注意。
  • 原因：因为直接 data:{} 的话，这个 {} 是个对象，引用类型。如果多处地方引用同一个组件的话，则共享同一个data对象，这是不合理的，所以需要每次使用组件时，return一个新的对象，这样就不会共享了。

参数1：组件名称
参数2：组件模板对象
Vue.component('myLogin', {
  template: '<div><a href="#">登录</a> | <a href="#">注册</a></div>',
  data() {
    return {
      msg: '大家好！'
    }
  },
  methods:{
    login(){
      alert('点击了登录按钮');
    }
  }
});
// 使用
<my-login></my-login>

定义私有组件

export default {
  components: {
    login: {
      template: '<h1>我是个私有的login组件</h1>'
    }
  }
}

利用 v-if 和 v-else 切换组件

<input type="button" value="toggle" @click="flag=!flag">
<my-com1 v-if="flag"></my-com1>
<my-com2 v-else></my-com2>

data() {
	return {
  	flag: true
  }
}

⭐️ 动态组件

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

<div id="app">
	<a href="#" @click.prevent="comName='login'">登录</a>
  <a href="#" @click.prevent="comName='register'">注册</a>
  <hr>
  <transition mode="out-in">
  <component :is="comName"></component>   <===comName就是组件名
  </transition>
 </div>

父子组件

• 父和子，使用的是父，被用的是子
• 父组件需要声明子组件，引入子组件

import 子组件对象 from './components/xxx.vue';
{
	components: {
  	组件名: 子组件对象
  }
}

// 第一种用法 ===> 父组件声明子组件
// App.vue文件
<template>
	<div> <sw-header></sw-header> </div>
</template>

import Header from './components/Header.vue';
  
export default {
	components: {
  	'sw-header': Header,
  }
}
  
// 第二种用法 ===> main.js中全局引用和声明子组件，其他组件可直接使用
// main.js文件
import Header from './components/Header';
Vue.component('sw-header', Header);
new Vue({
    el: '#app',
    render(h) {
        return h(App);
    },
})
 
// App.vue中直接使用，不用引用和在components中声明
<div>
  <sw-header></sw-header>
</div>

⭐️ 父子组件传值

父组件给子组件传值

• 父组件通过子组件的属性进行传值
  • 方式有2：
    • 常量：prop1="常量值"
    • 常量：:prop2="变量名"