VueJS（六）

mwwb

于 2020-07-01 17:35:26 发布

阅读量79

点赞数

分类专栏： VueJS 文章标签： vue

本文链接：https://blog.csdn.net/qq_43278421/article/details/107055530

版权

VueJS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天继续学组件

先回顾一下昨天学的组件内容
组件和vue实例一样需要注册，注册完后使用方式和一般的元素标签类似，通过注册里面的内容对标签进行渲染，方法有template等
注册又分为全局注册component和局部注册components，局部注册可以嵌套局部注册，无限套娃

下面是一个局部注册的代码：

	<body>
		<div id="app">
			<my-qian></my-qian>
		</div>
		<script>
			var Child = {
				template:'<div>拒不注册</div>'
			}
			var app = new Vue({
			 el:"#app",
			 components:{
				"my-qian":Child
			  },
			})
		</script>
	</body>

看了一下，全局注册和局部注册的切就在于component(s)一个是写在vue实例外的，一个是写在vue实例里面的，写在实例里面，应该只有这个实例能够使用该组件。

Vue组件的模板在默写情况下会受到html的限制，比如<table>内规定只允许是<tr>、<td>、<th>这些表格元素，所以在table内直接使用组件是无效的，这种情况下需要用特殊的属性来挂载组件
如下：

<body>
		<div id="app">
			<table>
				<tbody is="my-component"></tbody>
			</table>
		</div>
		<script>
			Vue.component('my-component',{
				template:'<div>内容</div>'
			});
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

他这里就不是直接使用的组件标签，而是在一个元素标签中用is挂载了组件名

除了template之前用它在注册组件的内容中添加DOM，还可以在注册组件的内容中添加和vue实例一样的data，method等属性，不过组件注册里面的data要写的是函数

<body>
		<div id="app">
			<my-qian></my-qian>
		</div>
		<script>
			Vue.component('my-qian',{
				template:'<div>{{message}}</div>',
				data:function(){
					return {
						message:'组件'
					}
				}
	
			});
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

就通过data的return把template中的message赋值了
当组件引用外部对象的时候，属性是共享的图片同步的，这里就是message同步

	<div id="app">
			<my-qian></my-qian>
			<my-qian></my-qian>
			<my-qian></my-qian>
		</div>
		<script>
			var data = {
				counter:0
			};
			Vue.component('my-qian',{
				template:'<button @click="counter++">{{counter}}</button>',
				data:function(){
					return data;
				}
			});
			
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

像上面的例子，3个标签共享了data，当你单击的时候，3个是同时
的

如果想要让他们互不影响，可以参考下面的代码的做法：

	<body>
		<div id="app">
			<my-qian></my-qian>
			<my-qian></my-qian>
			<my-qian></my-qian>
		</div>
		<script>
			Vue.component('my-qian',{
				template:'<button @click="counter++">{{counter}}</button>',
				data:function(){
					return {
						counter: 0
					};
				}
			});
			var app = new Vue({
				el:'#app'
			})
			
		</script>
	</body>

就把原来通过data引入的外部对象直接写在data：内容中，这样几个counter值之间就不是共享的了

使用props传递数据

基本的用法
组件不仅是要重复用内容，更要能够在组件之间进行通信。父组件中包含子组件，父组件像子组件传递数据或参数，子组件收到后会根据参数的不同来渲染不同的内容或执行操作。这个传递数据是正向的，通过props来实现。

在组件中是使用props来声明从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象

数组对象的案例如下：

	<body>
		<div id="app">
			<my-qian message = "来吃大"> </my-qian>
		</div>
		<script>
			Vue.component('my-qian',{
				props:['message'],
				template:'<div>{{message}}</div>'
			});
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

上面的

<div id="app">
	<my-qian message = "来吃大"> </my-qian>
</div>

经过渲染后就会成为下面这样

<div id="app">
    <div>来打啊</div>
</div>

像之前不使用props来声明的，他是依靠return，而像这样声明的，他是得到来自父级的message的值，return得到的是组件自身的数据
注意的是html特性不区分大小写，命名的时候推荐-来分割

	<body>
		<div id="app">
			<my-qian message-age = "来吃大"> </my-qian>
		</div>
		<script>
			Vue.component('my-qian',{
				props:['messageAge'],
				template:'<div>{{messageAge}}</div>'
			});
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

就是像这样的，js里面用了小驼峰命名，但在html只能选择使用-

如果是动态的父数据，就是类似用v-bind绑定的数据，也可以实时传递给子组件，使用指令v-bind来动态绑定props的值

<body>
		<div id="app">
		   <input type="text" v-model="parent" />
		   <my-qian :message="parent" ></my-qian>
		</div>
		<script>
			Vue.component('my-qian',{
				props:['message'],
				template:'<div>{{message}}</div>'
			});
			var app = new Vue({
				el:'#app',
				data:{
					parent:''
				}
			})
		</script>
	</body>

就和普通的多一个vue实例中创建parent变量，并与输入文本框中的绑定，然后自己创建的组件标签可以共享parent，还是一样的通过props传递父组件的parent的数据值

数据验证

这个验证指的是数据类型的验证，字符串、数字等不同类别

Vue.component('my-qian',{
    props:{
        propA:Number,    //必须是数字
        propB:[String,Number],    //必须是字符串或者数字
        propC:{                    
            type:Boolean,            //布尔值，默认为真
            required:true
        },
        propD:{
            type:Number,           //必须数字而且必填
            required:true
        },
        propE:{
            type:Array,                //如果是数组或者对象，默认值必须是一个函数来返回
            default:function(){
                 return [];
            }
        },
        propF:{                             //自定义一个验证函数
             validator:function(value){
                  return value > 10;
             }
        }
     }
 });