组件注册和使用
1. 注册全局组件
使用全局的Vue直接注册：Vue.component，组件中的模板需定义在template中，通过自己定义的组件名称来调用。
如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<el-h1></el-h1>
</div>
<script type="text/javascript">
// 定义一个全局组件，
Vue.component('el-h1',{
template:'<h1>自己定义的组件</h1>'
})
var vm = new Vue({
el:'#app'
})
</script>
</body>
</html>
2. 组件中的数据 需要以函数的形式定义在data中，通过return返回。
如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<el-h1></el-h1>
</div>
<script type="text/javascript">
// 定义全局组件
Vue.component('el-h1',{
template:'<h1>自己定义的组件--{{name}}</h1>',
// 组件中的数据
data:function(){
return {
name:'Vue'
}
}
})
var vm = new Vue({
el:'#app'
})
</script>
</body>
</html>
3. 组件中定义方法 与vue实例中一样，定义在methods中。
注意：
①当template中的标签需要换行时应使用 ` 模板字符串引号。
②组件模板中的根节点必须是一个元素
③当组件使用驼峰式命名规则命名HelloWorld时，在普通的标签模板中使用时，要使用（hello-world），如果在模板字符串中则可以使用HelloWorld的形式。
如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用组件HelloWorld时，应通过hello-world形式 -->
<hello-world></hello-world>
<hr >
<el-h1></el-h1>
</div>
<script type="text/javascript">
// 驼峰式命名组件名称
Vue.component('HelloWorld', {
template: `
<div>
<h1>驼峰式命名组件名称</h1>
</div>`
})
// 定义全局组件
Vue.component('el-h1', {
template: `
<div>
<h1>自己定义的组件--{{name}}</h1>
<button type="button" @click="btn">按钮</button>
</div>`,
// 组件中的数据
data: function() {
return {
name: 'Vue'
}
},
methods: {
btn() {
alert('Vue')
}
}
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
4. 局部组件注册
使用vue实例的components配置项进行注册
注意：局部组件只能在注册他的父组件中使用
如下： 定义的子组件el-btn只能在父组件el-h1中使用，而使用在HelloWorld中并没用生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用组件HelloWorld时，应通过hello-world形式 -->
<hello-world></hello-world>
<hr >
<el-h1></el-h1>
</div>
<script type="text/javascript">
// 定义全局组件
Vue.component('HelloWorld', {
template: `
<div>
<h1>驼峰式命名组件名称</h1>
<el-btn></el-btn>
</div>`
})
// 定义全局组件
Vue.component('el-h1', {
template: `
<div>
<h1>自己定义的组件--{{name}}</h1>
<el-btn></el-btn>
</div>`,
// 定义局部组件
components:{
'el-btn':{
template:'<button type="button" >局部组件中的按钮</button>'
}
},
// 组件中的数据
data: function() {
return {
name: 'Vue'
}
},
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
组件之间的数据传递
1. 父组件传递数据到子组件
子组件中需要通过props:[ ]声明接收传过来的值，而在使用子组件时通过绑定自定义的属性值(props中的值)来接收父组件中的数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<el-h1 :datas="value"></el-h1> // 绑定属性的形式传递给datas
</div>
<script type="text/javascript">
// 定义全局组件
Vue.component('el-h1', {
template: `
<div>
<h1>自己定义的组件--{{name}}</h1>
<h2>父组件中传递的数据{{datas}}</h2>
</div>`,
//定义props接收传递过来的值
props:['datas'],
// 组件中的数据
data: function() {
return {
name: 'Vue'
}
},
})
var vm = new Vue({
el: '#app',
data:{
value:'Python'
}
})
</script>
</body>
</html>
2. 子组件往父组件中传数据
实现步骤：
1.子组件中自定义了一个点击事件，通过$ emit 触发自定义的事件，并分别传入对应的参数。
2.在父组件中监听事件
当触发事件时，子组件中传递过来的数据，父组件可以通过定义的方法hand中的$event来接收，这时传过来的参数”JAVA“通过hand方法赋值给了name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<el-h1 :datas="value" @test="hand($event)"></el-h1>
<h1>{{name}}</h1>
</div>
<script type="text/javascript">
// 定义全局组件
Vue.component('el-h1', {
template: `<button type="button" @click="$emit('test','JAVA')">按钮</button>`
})
var vm = new Vue({
el: '#app',
data: {
value: 'Python',
name: ''
},
methods: {
hand(a) {
console.log(a)
this.name = a
}
}
})
</script>
</body>
</html>
当点击按钮时：