欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue的组件化开发

程序员文章站 2024-03-15 11:01:29
...
  1. 组件创建的两种方式:

    1. 局部声明
    2. 全局声明
  2. 组件类型

    1. 通用组件(表单、弹窗、布局类等)
    2. 业务组件(抽奖、机器分类)
    3. 页面组件(单页面开发程序的每个页面都是一个组件、只完成功能、不复用)
  3. 组件开发三部曲:声明、注册、使用

  4. slot插槽

    • slot就是子组件里给dom留下的坑位
    • <子组件>DOM</子组件>
    • slot是动态的DOM
  5. slot使用示例

    <!DOCTYPE html>
    <html>
    <head>
    	<title>slot-插槽</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    	<div id="app"></div>
    
    	<script type="text/javascript" src="vue.js"></script>
    	<script type="text/javascript">
    		var Parent = {
    			//slot留坑
    			template: `
    				<div>
    					我是父组件
    					<slot name='hello'></slot>
    				</div>
    			`
    		}
    		new Vue({
    			el:'#app',
    			components:{
    				Parent
    			},
    			template: `
    				<div>
    					<parent>
    						<div>我是插槽内容1</div>
    						<div slot='hello'>我是插槽内容2</div>
    						<div>我是插槽内容3</div>
    					</parent>
    				</div>
    			`,
    			data: function(){
    				return {
    					
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    
  6. ref获取子组件的实例

    • 识别: 在子组件或者元素上使用属性ref=“xxxx”
    • 获取: this.$refs.xxxx获取元素
    • $el是拿其DOM
  7. $parent获取父组件实例(可在子组件直接使用this.即可)

  8. ref的使用示例(获取父组件和子组件):

    <!DOCTYPE html>
    <html>
    <head>
    	<title>ref</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    	<div id="app"></div>
    
    	<script type="text/javascript" src="vue.js"></script>
    	<script type="text/javascript">
    		var Child = {
    			template: `
    				<div>我是子组件</div>
    			`,
    			data(){
    				return {
    					msg: 'hello'
    				}
    			},
    			created(){
    				//refs获取父组件
    				console.log(this.$parent);
    			}
    		}
    		var Parent = {
    			//slot留坑
    			template: `
    				<div>
    					我是父组件
    					<slot name='hello'></slot>
    					<child ref='childs'></child>
    				</div>
    			`,
    			components:{
    				Child
    			},
    			data(){
    				return {
    					parents:'我是父组件'
    				}
    			},
    			mounted(){
    				//refs获取子组件
    				//console.log(this.$refs.childs.$el);  
    				//console.log(this.$refs.childs);
    			}
    
    		}
    		new Vue({
    			el:'#app',
    			components:{
    				Parent
    			},
    			template: `
    				<div>
    					<parent>
    						<div slot='hello'>我是插槽内容2</div>
    					</parent>
    				</div>
    			`,
    		})
    	</script>
    </body>
    </html>
    
  9. 父子组件之间的通信

  10. 父传子

    1. 父用子的时候通过属性传递
    2. 子要声明props:[‘属性名’]来接受
    3. 收到就是自己的了,随便使用
      • 在template中直接使用
      • 在js中this.属性名 使用
  11. 父传子使用示例

    <!DOCTYPE html>
    <html>
    <head>
    	<title>组件间的通信-父组件传给子组件</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    	<div id="app"></div>
    
    	<script type="text/javascript" src="vue.js"></script>
    	<script type="text/javascript">
    		//子组件接收父组件传过来的数据
    		var Child = {
    			template: `
    				<div>我是子组件{{ sendchild }}</div>
    			`,
    			props:['sendchild']
    		}
    
    		//父组件传递数据sendchild给子组件
    		var Parent = {
    			components:{
    				Child
    			},
    			template: `
    				<div>
    					我是父组件
    					<child sendchild='父组件传给你的'></child>
    				</div>
    			`
    		}
    
    		new Vue({
    			el:'#app',
    			components:{
    				Parent
    			},
    			template: `
    				<div>
    					<parent></parent>
    				</div>
    			`,
    			data: function(){
    				return {
    					
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    
  12. 子传父

    1. 子组件通过$emit(‘自定义事件名’, 变量1, 变量2)触发
    2. 父组件@自定义事件名='事件名’监听
  13. 子组件传数据给父组件示例

    <!DOCTYPE html>
    <html>
    <head>
    	<title>组件间的通信-子组件传给父组件</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    	<div id="app"></div>
    
    	<script type="text/javascript" src="vue.js"></script>
    	<script type="text/javascript">
    		//子组件发送数据给父组件
    		var Child = {
    			template: `
    				<div>
    					我是子组件
    					<button @click='sendparent'>反馈数据给父组件</button>
    				</div>
    			`,
    			methods:{
    				sendparent(){
    					this.$emit('baba', '这是子组件给你的数据');
    				}
    			}
    		}
    
    		//父组件接收子组件传过来的数据
    		var Parent = {
    			components:{
    				Child
    			},
    			template: `
    				<div>
    					我是父组件{{ msg }}
    					<child @baba='reverse'></child>
    				</div>
    			`,
    			data(){
    				return {
    					msg: ''
    				}
    			},
    			methods:{
    				reverse(val){
    					this.msg = val
    				}
    			}
    		}
    
    		new Vue({
    			el:'#app',
    			components:{
    				Parent
    			},
    			template: `
    				<div>
    					<parent></parent>
    				</div>
    			`,
    			data: function(){
    				return {
    					
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    
  14. 非父子组件之间的通信

    1. 创建一个空实例(bus*事件总线也可以叫做中间组件)
    2. 利用emit on的触发和监听事件实现非父子组件之间的通信