Vue 組件小結

時間  2020-08-10
標籤 vue 組件 小結 简体版
原文   原文鏈接

Vue 組件小結

本身學習時記錄，略混亂，可能有錯，不屬於教程，慎讀！html

1. 全局組件/局部組建語法

全局：vue

<div id="app">
    <my-component></my-component>
</div>
 
<script>
// 註冊
Vue.component('my-component', {
  template: '<h1>自定義組件!</h1>'
})
// 建立根實例
new Vue({
  el: '#app'
})
</script>

局部：linux

<div id="app">
    <my-component></my-component>
</div>
 
<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}
 
// 建立根實例
new Vue({
  el: '#app',
  components: {
    'my-component': Child
  }
})
</script>

2. 組建的data屬性必須是function return形式

其它屬性methods compute跟正常同樣nginx

Vue.component("my-component",{
	template: '<div>模版：{{ Msg }}' +
			  		'</div>',
	data: function() {
		return {
			Msg: "屬性"
		};
	}
});

3. props：父組建給子組建傳數據

  • props能夠是數組也能夠是object
  • warningGMessage是子組建props中的一個值
  • 在父組建裏props是一個屬性，能夠用v-bind動態綁定以下例
  • 若是傳的是基礎類型Number、string這種，只能由父傳遞向子，父改變，子會變，反之不行，會出warning。這是vue2的一種安全性設計。以下例1，會出warning。
  • 解決方法能夠複製一份如例2，這樣至關於用父給子賦值
  • 但若是傳的是object，父子共享，不管複製不復制都共享，由於是引用如例3
//例1
//html
<div id="app" >
		<input type="text" v-model="parentMessage">
		父節點: {{ parentMessage }}
		<my-component :warning-g-message="parentMessage"></my-component>
</div>
Vue.component("my-component",{
	props: ['warningGMessage'], //由於js代碼要用因此用駝峯不用-鏈接，html裏用-在大寫字母前warning-g-message
	template: '<div>模版：{{ warningGMessage }} <input type="text"  v-model="warningGMessage"/> ' +
			  		'</div>',
});
var app = new Vue({
	el: '#app',
	data: {
		parentMessage: "DOM傳遞"
	}
});
//例2
//html
<div id="app" >
		<input type="text" v-model="parentMessage">
		父節點: {{ parentMessage }}
		<my-component :warning-g-message="parentMessage"></my-component>
</div>
Vue.component("my-component",{
	props: ['warningGMessage'], //由於js代碼要用因此用駝峯不用-鏈接，html裏用-在大寫字母前warning-g-message
	template: '<div>模版：{{ Msg }} <input type="text"  v-model="Msg"/> ' +
			  		'</div>',
	data: function() {
		return {
			Msg: this.warningGMessage
		};
	}
});
var app = new Vue({
	el: '#app',
	data: {
		parentMessage: "DOM傳遞"
	}
});
//例3
//html
<div id="app" >
		<input type="text" v-model="parentMessage">
		父節點: {{ parentMessage.msg }}
		<my-component :warning-g-message="parentMessage"></my-component>
</div>
// vue
Vue.component("my-component",{
	props: ['warningGMessage'], //由於js代碼要用因此用駝峯不用-鏈接，html裏用-在大寫字母前warning-g-message
	template: '<div>模版：{{ Msg.msg }} <input type="text"  v-model="Msg.msg"/> ' +
			  		'</div>',
//template: '<div>模版：{{ warningGMessage.msg }} <input type="text"  v-model="warningGMessage.msg"/> ' +
			  		'</div>',
	data: function() {
		return {
			Msg: this.warningGMessage
		};
	}
});
var app = new Vue({
	el: '#app',
	data: {
		parentMessage: {
			msg:"DOM傳遞"
		}
	}
});

4. 子給父傳數據：自定義事件

  • 子用$emit("事件名", 參數) //這個事件名要用xxx-xxx的形式，不能駝峯命名
  • 父用@事件名相應，而後參數就是傳遞的數據了，下面給一個比較複雜的例子
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue test</title>
</head>
<body>
	<div id="app" >
		<input type="text" v-model="parentMessage">
		父節點: {{ parentMessage.msg }}
		<my-component :warning-g-message="parentMessage"></my-component>
	</div>
	<div id="app2" >
		<input type="text" v-model="parentMessage">
		<my-component :warning-g-message="parentMessage" @child-clk="handleChildClk"></my-component>
		<parrent-component></parrent-component>
	</div>

	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="components.js"></script>
</body>
</html>
Vue.component("my-component",{
	props: ['warningGMessage'], //由於js代碼要用因此用駝峯不用-鏈接，html裏用-在大寫字母前warning-g-message
	template: '<div>模版：{{ warningGMessage.msg }} <input type="text"  v-model="warningGMessage.msg"/> ' +
			  '<button @click="handleClk">click</button>' +
			  '</div>',
	data: function() {
		return {
			Msg: this.warningGMessage
		};
	},
	methods: {
		handleClk: function() {
			console.log("child handleClk");
			this.$emit('child-clk', "來自子組建的消息"); // 不能用駝峯命名
		}
	}
});

Vue.component("parrent-component",{ //真正用組件做爲父組件
	template: '<div>{{parentMessage.msg}}<br />' + 
			'<my-component :warningGMessage="parentMessage" v-on:child-clk="handleChildClk"></my-component>'+
			'</div>',
	data: function() {
		return {
			parentMessage: {
				msg: "parrent-component消息"
			}
		}
	},
	methods: {
		handleChildClk: function(chldmsg) {
			console.log(chldmsg);
			this.parentMessage.msg += chldmsg;
		}
	}
});

var app = new Vue({
	el: '#app',
	data: {
		parentMessage: {
			msg:"DOM傳遞"
		}
	}
});

var app2 = new Vue({
	el: '#app2',
	data: {
		parentMessage: {
			msg:"DOM傳遞app2"
		}
	},
	methods: {
		handleChildClk: function(chldmsg) {
			console.log(chldmsg);
			this.parentMessage.msg += chldmsg;
		}
	}
});

5. 利用props和自定義事件實現父子數據雙向綁定

除了傳object引用實現共享以外，還能夠用props+自定義事件數組

  • props實現父到子
  • 自定義事件實現子到父
  • 這種方法能夠實現自定義表單的雙向綁定
//html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue test</title>
</head>
<body>
	<div id="app" >
		<input type="text" v-model="parentMessage">
		父節點: {{ parentMessage }}
		<my-component :warning-g-message="parentMessage" v-model="parentMessage"></my-component>
	</div>

	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="components2.js"></script>
</body>
</html>
//vue
Vue.component("my-component",{
	props: ['warningGMessage'],
	template: '<div>模版：{{ warningGMessage }} <input type="text" :value="warningGMessage"  @input="handleInput"/> ' +
			  		'</div>',
	methods: {
		handleInput: function(event) {
			this.$emit('input',event.target.value);
		}
	}
});
var app = new Vue({
	el: '#app',
	data: {
		parentMessage:"DOM傳遞"
	}
});

子組件用value + @input 達到相似v-model的功能
當子組件變化時，給父組建發input事件，父組件的v-model（至關於value+@input）就能相應此事件，動態修改綁定的parentMessage值安全

6.任意組件間的消息傳遞

  • 中央事件總線方法（bus）
//html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue test</title>
</head>
<body>
	<div id="app1" >
		<my-component></my-component>
	</div>
	<div id="app2">
		{{ message }}
	</div>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="bus.js"></script>
</body>
</html>
//vue
var bus = new Vue(); //總線
Vue.component("my-component",{
	template: '<button @click="handleEvent">傳遞事件</button> ' +
			  '</div>',
	methods: {
		handleEvent: function(event) {
			bus.$emit('on-message',"my-component的內容"); //用總線發事件
		}
	}
});

var app1 = new Vue({
	el: '#app1',
});
var app2 = new Vue({
	el: '#app2',
	data: {
		message: ""
	},
	mounted: function() { //在mounted鉤子函數裏啓動監聽
		var _this = this;
		bus.$on("on-message",function(msg){ //監聽總線事件
			_this.message = msg;
		})
	},
})
  • this.$parrent和this.$children能直接訪問父子組件，不太推薦用，破壞封裝性

7. slot

非命名和命名兩種服務器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue test</title>
</head>
<body>
	<div id="app" >
		<my-component>
			<h2 slot="header">標題</h2>
			<p>正文</p>
			<p>更多的正文</p>
			<div slot="footer">底部信息</div>
			<p>又正文???咋辦</p>
		</my-component>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="slot.js"></script>
</body>
</html>
      
Vue.component("my-component",{
	template: '\
	<div class="container">\
		<div class="header">\
			<slot name="header"></slot>\
		</div>\
		<div class="main">\
			<slot>父組件沒給的話，默認填充</slot>\
		</div>\
		<div class="footer">\
			<slot name="footer"></slot>\
		</div>\
	</div>',
});
var app = new Vue({
	el: '#app',
});

做用域插槽：實現子向父傳遞數據app

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue test</title>
</head>
<body>
	<div id="app" >
		<my-component>
			<template slot-scope="props">
				<p>來自父組件的</p>
				<p>{{ props.msg }}</p>
			</template>
		</my-component>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="slot.js"></script>
	
</body>
</html>
//vue
Vue.component("my-component",{
	template: '	<div> \
					<slot msg="子組件內容"></slot>\
				</div>'
});
var app = new Vue({
	el: '#app',
});

8. 注

  • v-model="x" 至關於:value="x"和@input(handleX)， 隱式聲明瞭value函數

  • <input>中的@input和@changed區別在於學習

    • input是隻要輸入就出發
    • changed是文本框失去焦點或按enter後觸發

  • watch

    Vue.component('input-number', {
	watch: {
		currentValue: function(val) {
			this.$emit('input', val);
			this.$emit('on-change', val);
		},
		value: function(val) {
			this.updateValue(val);
		}
	},
});

    用於監控某個值是否變化，觸發事件

9. 部署nginx服務器（linux）

最簡單作法

  • /var/www/html 把打好的包扔到這裏

  • 改/etc/nginx/sites-available/default文件

    #index index.html index.htm index.nginx-debian.html;
index index_prod.html index_prod.htm;#換成本身的入口頁面

  • service nginx restart

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程