[Vue]---Vue组件化开发基础

最新推荐文章于 2023-06-28 18:12:05 发布

_筱龙

最新推荐文章于 2023-06-28 18:12:05 发布

阅读量118

点赞数

分类专栏： vue全家桶资料文章标签：组件化 vue

本文链接：https://blog.csdn.net/IT_qslong/article/details/109473059

版权

vue全家桶资料专栏收录该内容

20 篇文章 3 订阅

订阅专栏

组件化开发思想

现实中的组件化思想体现

标准
分治
重用
组合

组件注册

全局组件注册语法

Vue.component(组件名称,{
	data:组件数据,
	template:组件模板内容
})

组件用法

<div id='app'>
    <button-counter></button-counter>
</div>

<button-counter></button-counter>可以重复使用

<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: {

        }
    });

组件注册注意事项

data 必须是一个函数
- 分析函数与普通对象的对比
组件模块内容必须是单个跟元素
- 分析演示实际的效果
组件模块内容可以是模板字符串
- 模板字符串需要浏览器提供支持(ES6语法)

组件命名方式

短横线方式

Vue.component( 'my-component ', {/* ... */ })

驼峰方式

Vue.component('MyComponent' , {/* ... */ })

如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

局部组件注册

var ComponentA= {/*... */ }
var componentB = {/*... */ }
var Componentc = {/*... */ }
new vue ( {
	el: #app'
	components: {
		'component-a' : ComponentA,
		'component-b' : ComponentB,
		'component-c' : ComponentC,
	}
})

局部组件只能在注册它的父组件中使用

<div id="app">
	<my-component></my-component>
</div>
<script>
	// 定义组件的模板
	var Child = {
	template: '<div>A custom component!</div>'
	}
	new Vue({
		//局部注册组件  
		components: {
			// <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
			'my-component': Child
		}
	})
 </script>

Vue调试工具用法

打开网址
克隆git clone https://github.com/vuejs/vue-devtools.git
安装 yarn install命令和 yarn run build命令
打开扩展程序,点击开发者模式,加载已解压的扩展程序
找到vue-devtools/packages/shell-chrome/

组件间数据交互

父组件向子组件传值

组件内部通过props 接受传递过来得值

Vue.component ( 'menu-item' , {
	props:, ['title'],
	template: '<div>{{ title } }</div>'
})

父组件通过属性将值传递给子组件

<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<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="https://cdn.jsdelivr.net/npm/vue/dist/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>
</html>

props属性名规则
- props中使用驼峰形式
- 模板中需要使用短横线的形式
- 字符串形式的模板中没有这个限制

Vue.component ( 'menu-item' , {
	//在Javascript 中是驼峰式的
	props:[ 'menuTitle'],
	template: '<div>{{ menuTitle }}<ldiv>'
})
<!-在html中是短横线方式的-->
<menu-item menu-title="nihao"></menu-item>

props属性值类型
- 字符串 String
- 数值 Number
- 布尔值 Boolean
- 数组 Array
- 对象 Object

子组件向父组件传值

子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text")'>扩大字体</button>

父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize +=0.1'></menu-item>

子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text",0.1)'>扩大字体</button>

父组件监听子组件的事件

<menu-item v-on:enlarge-text=' fontSize += $event '></menu-item>

<div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
     <!-- 2 父组件用v-on 监听子组件的事件
		这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	
	-->	
    <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>
			###  1、子组件用$emit()触发事件
			### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
          <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>

非父子组件间传值

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
提供事件中心 var hub = new Vue()

传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名
销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

单独的事件中心管理组件间的通信

var eventHub = new Vue()

监听事件与销毁事件

//监听事件
eventHub.$on('add-todo',addTodo)
//销毁事件
eventHub.$off('add-todo')

触发事件

eventHub.$emit('add-todo',id)
<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">
    /*
      兄弟组件之间数据传递
    */
    //1、 提供事件中心
    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(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
       // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
        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(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>

组件插槽

作用

父组件向子组件传递内容(模板内容)
组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

基本用法

插槽位置

Vue.component('alert-box' , {
	template:
		<div class="demo-alert-box">
			<strong>Error!</strong>
    		<slot></slot>
		</div>
})

插槽内容

<alert-box>Something bad happened.</alert-box>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/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>
</body>
</html>

具名插槽用法

废弃了原来的slot,换成现在v-slot:(可以简写成#)

若一个组件中有多个插槽，则可对这多个插槽进行命名，进行区分，也使得插槽更具语义化

//comp
<div>
	<p><slot></slot></p>
	<span><slot name="content"></slot></span>
</div>

//parent
//注意：父组件中使用的子组件的插槽，其作用域为父组件，故该title会渲染成父组件中的title的值
data() {
	return {
		title: '标题'
	};
}
<comp>
	//默认插槽用default做参数
	<template v-slot:default>具名插槽{{title}}</template>
	<template v-slot:content>内容信息</template>
</comp>

/* 渲染之后的为：
<div>
	<p>具名插槽标题</p>
	<span>内容信息</span>
</div>
*/

作用域插槽

废弃了slot-scope

当父组件中的使用到了子组件中的插槽，且需要显示子组件的某个变量的值，可通过slot的值进行上下文对象的获取

应用场景
- 父组件对子组件的内容进行加工处理

//comp
<div>
	<slot :foo="foo"></slot>
</div>

//parent
<comp>
	<template v-slot:default="ctx">内容显示:子组件的foo数据为{{ctx.foo}}</template>
</comp>

_筱龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue]---Vue组件化开发基础

组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法Vue.component(组件名称,{ data:组件数据, template:组件模板内容})组件用法<div id='app'> <button-counter></button-counter></div><button-counter></button-counter>可以重复使用<scrip
复制链接

扫一扫