欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js全局組件和局部組件示例代碼

 更新時(shí)間：2022年12月10日 10:18:13   作者：胖頭小奶虎  
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個(gè)組件,每個(gè)組件單獨(dú)使用CSS,JS,模板,圖片等資源進(jìn)行開發(fā)與維護(hù),然后在制作網(wǎng)頁的時(shí)候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下

全局組件和局部組件

全局組件的定義的代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>全局組件</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<div id="app2">
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<script type="text/javascript">
			// 創(chuàng)建組件構(gòu)造器
			const cpnC = Vue.extend({
				template:`
					<div>
						<h2>我是標(biāo)題</h2>
						<p>我是內(nèi)容：小奶虎</p>
					</div>
				`
			})
			//注冊組件(全局組件：意味著可以在多個(gè)Vue的實(shí)例下面使用)
			Vue.component('cpn',cpnC);
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue"
				}
			});
			var app2 = new Vue({
				el:"#app2",
				data:{
					message:"hello Vue"
				}
			});
		</script>
	</body>
</html>

局部組件的定義的代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>局部組件</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<div id="app2">
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<script type="text/javascript">
			// 創(chuàng)建組件構(gòu)造器
			const cpnC = Vue.extend({
				template:`
					<div>
						<h2>我是標(biāo)題</h2>
						<p>我是內(nèi)容：小奶虎</p>
					</div>
				`
			})
			//注冊組件(全局組件：意味著可以在多個(gè)Vue的實(shí)例下面使用)
			// Vue.component('cpn',cpnC);
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue"
				},
				components:{
					//cpn：使用組件時(shí)的標(biāo)簽名
					//此時(shí)注冊的是局部組件
					cpn:cpnC
				}
			});
			var app2 = new Vue({
				el:"#app2",
				data:{
					message:"hello Vue"
				}
			});
		</script>
	</body>
</html>

附：自定義全局組件

全局組件用到的是 Vue.component(tagName,option)，tagName是自定義的組件名稱,option是組件構(gòu)造器。具體使用方法如下：

在main.js中設(shè)置：

Vue.component('my-component', {
  template: '<button v-on:click="clickShow">切換<h1 v-show="show">全局組件的學(xué)習(xí)</h1></button>',
  data () {
    return {
      show: true
    }
  },
  methods:{
    clickShow(){
      this.show = !this.show
    }
  }
})

在組件中直接引用：

<template>
  <div>
    <my-component ></my-component>
  </div>
</template>

渲染結(jié)果為：

總結(jié) 

到此這篇關(guān)于vue.js全局組件和局部組件的文章就介紹到這了,更多相關(guān)vue.js全局組件和局部組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論