vue component动态组件_vue-component组件

compontent组件名称如何定义？

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

第一个参数就是“name'”组件的名字。

如果我们想在HTML中写这样的的组件名称，<my-name></my-name>。

那么我们在对组件进行定义的名称的时候要这样写

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

即首字母大写。

组件分为全局注册和局部注册。

全局注册

Vue.component('MyName', { // ... 选项 ... })

全局注册简单的来说，在任何地方都可以使用这个组件

局部注册

var MyName={// ... 组件内容 ...}

局部注册后然后在components里面定义一下。

new Vue({
	el:"#demo",
	components:{
		'my-name': MyName,
	}
})

定义component组件

首先我们来定义简单的组件一个写法。

HTML

<div id="demo">
	<btn-content></btn-content>
	<btn-content></btn-content>
</div>

javascript

<script type="text/template" id="template">
	<button>按钮点击</button>
</script>
<script>
	Vue.component("btn-content", {
		data: {},
		template: '#template'
	})
	new Vue({
		el: "#demo"
	})
</script>

关于这个<script type="text/template" id="template">写法，可以参考前期写的这篇文章。

soviya：vue-template三种写法介绍​zhuanlan.zhihu.com

我们在输出页面上可以看到有两个点击按钮。接下来，我们想点击按钮执行点击弹出内容加一操作。

点击事件是用什么指令？用v-on,关于v-on操作可以参考这篇文章

soviya：VUE操作classstyle绑定属性绑定事件事件修饰符​zhuanlan.zhihu.com

原HTML不变。

javascript

script type="text/template" id="template">
	<button @click="num">按钮点击{{msg}}次</button>
</script>
<script>
	Vue.component("btn-content", {
		data: function() {
			return {
				msg: 0
			}
		},
		methods: {
			num: function() {
				let msg = (this.msg) ++;
				alert("您即将点击完成" + (msg + 1) + "次");

			}
		},
		template: '#template'
	})
	new Vue({
		el: "#demo"
	})
</script>

这里需要注意的是，data必须是一个函数，那么data为什么是一个函数呢？假如组件中的data不是函数也可以执行的话，那么会和当前实例中的data起冲突。改变其一，另外一个也会随着改变。但是如果组件中data是一个函数的话，那么里面所定义的内容只在当前有效，不会污染到其它地方。

组件注册分为全局注册和局部注册，上面的实例给出的是全局注册。

通过 Prop 向子组件传递数据

HTML

<div id="demo">
	<msg title="来自父组件的标题内容"></msg>
</div>

javarscript

<script type="text/template" id="template">
	<h1>{{"子组件引用:"+title}}</h1>
</script>
<script>
	Vue.component("msg", {
		props: ['title'],
		template: '#template'
	})
	new Vue({
		el: "#demo"
	})
</script>

通过v-for来循环相似的的模块

例

HTML

<div id="demo">
	<msg v-for="post in posts" :title="post.title">
		{{"字组件引用:"+post.title}}
	</msg>
</div>

javascript

<script type="text/template" id="template">
	<h1>{{title}}</h1>
</script>
<script>
	Vue.component("msg", {
		props: ['title'],
		template: '#template'
	})
	new Vue({
		el: "#demo",
		data: {
			posts: [{
					id: 1,
					title: '第一段内容'
				},
				{
					id: 2,
					title: '第二段内容'
				},
				{
					id: 3,
					title: '第三段内容'
				}
			]
		}
	})
</script>

现在我们想在msg这个组件里面再加h1内容。

<script type="text/template" id="template">
	<h1>{{content}}</h1>
	<h3>{{title}}</h3>
</script>

这是错误的写法，因为每个组件中都只能用一个根元素，所以要建立一个标签然后使期包裹起来。

按照上面得出，下面这个是正确的写法

<script type="text/template" id="template">
	<div>
		<h1>{{content}}</h1>
		<h3>{{title}}</h3>
	</div>
</script>

现在有一个需求，就是点击子组件里面的按钮，然后改变父级里面所有字体的大小。

HTML

<div id="demo">
	<div :style="{fontSize:ftSize+'rem'}">
		<msg @chage="ftSize+=0.1" v-for="post in posts" :title="post.id">
			{{"字组件引用:"+post.title}}
		</msg>
	</div>
</div>

javascript

<script type="text/template" id="template">
	<div>
		<h3>{{content}}</h3>
		<button @click="$emit('chage')">点击我改变父级全局文字大小</button>
	</div>
</script>
<script>
	Vue.component("msg", {
		data: function() {
			return {
				content: "这是一段文字",
			}
		},
		props: ['post'],
		template: '#template'
	})
	new Vue({
		el: "#demo",
		data: {
			ftSize: 1,
			posts: [{
					id: 1,
					title: '第一段内容'
				},
				{
					id: 2,
					title: '第二段内容'
				},
				{
					id: 3,
					title: '第三段内容'
				}
			]
		}
	})
</script>

如果想让子改变父，那么首先在父定义一个想要改变的事件。然后在子使用$emit("父级定义的事件名称"。

当事件内容过多的时候，我们写在当前元素不好，不利于阅读。我们要写在methods方法里面。

HTML

<div id="demo">
	<div :style="{fontSize:ftSize+'rem'}">
		<msg @chage="onEnlargeText" v-for="post in posts" :title="post.id">
			{{"字组件引用:"+post.title}}
		</msg>
	</div>
</div>

javascript

<script type="text/template" id="template">
	<div>
		<h3>{{content}}</h3>
		<button @click="$emit('chage',0.1)">点击我改变父级全局文字大小</button>
	</div>
</script>
<script>
	Vue.component("msg", {
		data: function() {
			return {
				content: "这是一段文字",
			}
		},
		props: ['post'],
		template: '#template'

	})
	new Vue({
		el: "#demo",
		data: {
			ftSize: 1,
			posts: [{
					id: 1,
					title: '第一段内容'
				},
				{
					id: 2,
					title: '第二段内容'
				},
				{
					id: 3,
					title: '第三段内容'
				}
			]
		},
		methods: {
			onEnlargeText: function(num) {
				this.ftSize += num
			}
		}
	})
</script>

组件上使用v-model

HTML

<div id="demo">
	<msg></msg>
</div>

javascript

<script type="text/template" id="template">
	<div>
		<input v-model="value" type="text" />
		<h1>{{value}}</h1>
	</div>
</script>
<script>
	Vue.component("msg", {
		data: function() {
			return {
				value: this.value
			}
		},
		template: '#template',
		methods: {

		}
	})
	new Vue({
		el: "#demo",
		data: {},
		methods: {

		}
	})
</script>