文章目录
-
- 1.组件基本使用
- 2.局部组件的用法
- 3.组件间的传值（父子间 子父间 兄弟间）
- 4.插槽
1.组件基本使用
1.首先注册一个组件 用 Vue.component 写组件的名字
**组件中的数据必须用函数包裹
template 里面写的模板
methods 写你这个组件要用到的函数
到时候直接在页面调用你的组件名字 就可以将模板里的东西显示出来
<body><div id="app"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*组件注册*/Vue.component('button-counter', {
data: function(){
return {
count: 0}},template: '<button @click="handle">点击了{
{count}}次</button>',methods: {
handle: function(){
this.count += 2;}}})var vm = new Vue({
el: '#app',data: {
}});</script>
</body>
2.局部组件的用法
首先定义局部组件
然后再父组件中直接进行调用
<div id="app"><hello-world></hello-world><hello-tom></hello-tom><hello-jerry></hello-jerry><test-com></test-com></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*局部组件注册局部组件只能在注册他的父组件中使用*/Vue.component('test-com',{
template: '<div>Test<hello-world></hello-world></div>'});var HelloWorld = {
data: function(){
return {
msg: 'HelloWorld'}},template: '<div>{
{msg}}</div>'};var HelloTom = {
data: function(){
return {
msg: 'HelloTom'}},template: '<div>{
{msg}}</div>'};var HelloJerry = {
data: function(){
return {
msg: 'HelloJerry'}},template: '<div>{
{msg}}</div>'};var vm = new Vue({
el: '#app',data: {
},components: {
'hello-world': HelloWorld,'hello-tom': HelloTom,'hello-jerry': HelloJerry}});</script>
3.组件间的传值（父子间 子父间 兄弟间）
1.父组件向子组件传递
如果是子组件中想用父组件中的内容
1.要在子组件标签中 ：加一个名字接收父组件的内容
2.在子组件中要有一个新的属性 props 里面的写接收的名字 注意props是一个数组
3.直接在子组件调用
<body><div id="app"><div>{
{
pmsg}}</div><menu-item title='来自父组件的值'></menu-item><menu-item :title='ptitle' content='hello'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*父组件向子组件传值-基本使用*/Vue.component('menu-item', {
props: ['title', 'content'],data: function() {
return {
msg: '子组件本身的数据'}},template: '<div>{
{msg + "----" + title + "-----" + content}}</div>'});var vm = new Vue({
el: '#app',data: {
pmsg: '父组件中内容',ptitle: '动态绑定属性'}});</script>
</body>
2.子组件向父组件传递
1.使用自定义事件来传递 $emit（写函数名…）这个api要用在子组件的模板中
2.然后在父组件中监听这个事件 @函数名=function（$event）{}进而调用 这个function是在父组件中的 $event就是你传递的数值
<div id="app"><div :style='{fontSize: fontSize + "px"}'>{
{
pmsg}}</div><menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*子组件向父组件传值-携带参数*/Vue.component('menu-item', {
props: ['parr'],template: `<div><ul><li :key='index' v-for='(item,index) in parr'>{
{item}}</li></ul><button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button><button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button></div>`});var vm = new Vue({
el: '#app',data: {
pmsg: '父组件中内容',parr: ['apple','orange','banana'],fontSize: 10},methods: {
handle: function(val){
// 扩大字体大小this.fontSize += val;}}});</script>
3.兄弟组件间进行传递
1.要想兄弟组件间进行传递 必须有一个事件处理中心 var hub = new Vue();即可
2.在自己组件的函数中自定义一个事件 并通过事件中心
3.兄弟组件要在挂载完成也就是触发memounted时要通过事件中心监听事件是否发生
<div id="app"><div>父组件</div><div><button @click='handle'>销毁事件</button></div><!-- 兄弟组件 --><test-tom></test-tom><test-jerry></test-jerry></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*兄弟组件之间数据传递*/// 提供事件中心var hub = new Vue();Vue.component('test-tom', {
data: function () {
return {
num: 0}},template: `<div><div>TOM:{
{num}}</div><div><button @click='handle'>点击</button></div></div>`,methods: {
handle: function () {
hub.$emit('jerry-event', 2);}},memounted: function () {
// 监听事件hub.$on('tom-event', (val) => {
this.num += val;});}});Vue.component('test-jerry', {
data: function () {
return {
num: 0}},template: `<div><div>JERRY:{
{num}}</div><div><button @click='handle'>点击</button></div></div>`,methods: {
handle: function () {
// 触发兄弟组件的事件hub.$emit('tom-event', 1);}},mounted: function () {
// 监听事件hub.$on('jerry-event', (val) => {
this.num += val;});}});var vm = new Vue({
el: '#app',data: {
},methods: {
handle: function () {
hub.$off('tom-event');hub.$off('jerry-event');}}});</script>
4.插槽
1.基础插槽
在组件的模板中有一个 <slot>默认内容</slot>标签 里面可以写一些内容
当组件被调用时入过组件没有内容就会显示slot标签里的内容
调用了三次组件
运行结果如下
<div id="app"><alert-box>有bug发生</alert-box><alert-box>有一个警告</alert-box><alert-box></alert-box></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*组件插槽：父组件向子组件传递内容*/Vue.component('alert-box', {
template: `<div><strong>ERROR:</strong><slot>默认内容</slot></div>`});var vm = new Vue({
el: '#app',data: {
}});</script>
2.具名插槽
如果在一个组件里有几条不规则的p标签 标签里有slot属性 那么在这个组件的模板中又有名字一样的slot标签 那么相应内容的就会显示在对应名字的solt中
<div id="app"><base-layout><p slot='header'>标题信息</p><p>主要内容1</p><p>主要内容2</p><p slot='footer'>底部信息</p></base-layout></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*具名插槽*/Vue.component('base-layout', {
template: `<div><header><slot name='header'></slot></header><main><slot name='footer'></slot></main><footer><slot></slot></footer></div>`});var vm = new Vue({
el: '#app',data: {
}});</script>