Vue组件的基础使用

 

外部导入Vue文件里的组件

以App.vue文件为入口,修改如下





 import语句导入了位于components文件下的Vue_Test.vue文件

Vue组件的基础使用_第1张图片

在Vue_Test.vue文件中编写组件的内容,template放HTML代码,script放js代码,style放样式


 

 

 

内部使用创建的组件



	
		
		Vue框架学习_组件
		
	
	
		

但是这样会为每个待办项渲染同样的文本,有时候满足不了需求。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义,使之能够接受一个prop。 

prop特性使得组件内容动态修改

组件可通过prop特性动态绑定、修改内容,使得组件在不改变结构的情况下,有更多不同的内容和效果。

以下是官网的示例代码:



	
		
		Vue框架学习_组件
		
	
	
		

 

你可能感兴趣的:(vue)