Vue学习-组件基础--组件定义、动态切换（四）

效果：组件切换动画效果

1.自定义组件

先创建一个组件对象

var testbtn = {
	template : '<button type="button" @click="test">自定义组件</button>',	
	methods:{
		test(){
			console.log('子组件的单机事件')
		}
	}
}

在components中定义一下

components:{
	testbtn
},

body中

<testbtn></testbtn>

效果：

2.父组件向子组件传值/子组件调用父组件的data

1.子组件不能直接获取 父组件的data值
2.需经过parent+data名 在props中定义
3.然后子组件中绑定 父组件的data名

效果：

3.父组件向子组件传方法/子组件调用父组件的方法

1.代码如图

效果：

4.组件切换（动画效果）

1.隐藏的方式切换
设置一个flag 默认为true ，在利用v-show来实现隐藏和显示

2.利用animate.css实现组件的动画切换

首先导入animate.css

<link rel="stylesheet" href="../css/animate.min.css"/>