组件介绍
vue组件
1. 是页面组成的一部分
2. 是封装好的可重用的代码
组件注册
全局注册 1
大致可以分成三步
1.在我们引入vue.js之后,Vue会被注册为一个全局对象,我们使用对象本身的方法进行组件的创建
使用Vue这个全局对象的component方法进行全局注册一个组件
2.创建根实例,进行视图的绑定
3.组件的显示：将组价的名称作为标签写在视图内部,就能够完成组件的显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--3. 定义的组件名作为标签存在,将组件显示在页面上-->
<my-component></my-component>
</div>
</body>
</html>
<script>
//1. 使用vue这个全局队形内置的components方法进行组件的创建
//在components这个方法中有两个重要的参数,第一个参数是组件的名称,第二个参数是组件的内容
Vue.component('my-component', {
//在这里使用一个父标签将组件包裹起来
template: '<div><a href="#">注册</a><a href="#">登录</a></div>'
})
//2. 创建根实例,也就是实例化一个vue对象,进行视图的绑定
var vm = new Vue({
el: '#app'
})
</script>
全局注册2
使用全局的Vue.extend()构造器进行注册
Vue.extend()类似于继承,通过这个构造器扩展(继承)之后,相当于Vue对象本身添加了一些这个对象原先没有的东西
局部注册1
大致可以分成两个部分
1.穿件跟实例
2.在跟实例内部定义组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--3. 这是我定义的组件 占位标签-->
<my-component></my-component>
</div>
</body>
</html>
<script>
//1. 创建根实例
var vm = new Vue({
el: '#app',
//2. 在根实例内部创建组件
components:{
'my-component':{
template: '<div><a href="#">注册</a><a href="#">登录</a></div>'
}
}
})
</script>
组件内部的data
组件内部的data属性必须是一个函数
父子组件
一个组件的内部包含另外一个组件，内部的组件称为子组件，外部的组件称为父组件，这就是父子组件
父子组件通信—–解决父子组件之间传值问题
在上下级组件之间进行数据的传递,也就是父子组件通信
父组件需要将数据传递给子组件 自组件需要将其内部发生的事情通告给父组件
Props 与 camelCase
数据传输分三步:
1. 进行数据的传输,首先要有数据,也就是要在父组件上定义数据2. 使用props建立数据通信的渠道3. 在子组件中接收父组件通过props传递过来的数据
动态props
在模板中，要动态地绑定父组件的数据到子模板的props，与绑定到任何普通的HTML特性相类似，就是用 v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<template id="parent">
<div>
<div>我是父组件</div>
<child :message="message"></child>
</div>
</template>
<template id="child">
<div>
<div>我是子组件</div>
<span>{{message}}</span>
</div>
</template>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
//我是父组件
components:{'parent':{
template:"#parent",
data:function(){
return {
message:"hello world"
}
},
//我是子组件
components:{'child':{
props:['message'],
template:"#child"
}}
}}
})
</script>
版权声明：本文为winner-one原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。