上篇我们已经详细介绍Vue组件化入门详解中提到过,我们创建的组件在src文件夹下的component文件中。我们知道前段界面由html,css,js组成,与之相似,Vue组件话由template(模板)、script(脚本)、style(样式)组成。
template里面写我们需要的模板,但所有写的标签都要用一个仅且只有一个容器存放
script 里面存放我们定义的变量以方法,值得注意的是,在Vue中定义存放变量的data容器可以直接用花括号{}包裹起来,但是在组件化中,会报错,因为会造成传址问题,所以Data里面的变量需要放在一个函数里面。
style与前端界面一样,设置元素的样式,只是比之前的style 多了一个scoped,带有scoped标明在该style标签里面设置的样式,只会在该文件下有效,即不会对其他文件造成影响。
1 | <template> |
在主入口App.vue中,我们需要将上述组件化的Vue导入进来。导入当然要在script中导入
1 | import MyCompontent from '@/components/MyCompontent' |
然后在component组建中加入导入的文件名称,之后在模板template中定义的仅且只有一个容器中引用。注意,可以是单标签引用,也可以是双标签引用。两者没有什么区别,只是双标签可以利用插槽传数据
父级往子级传递数据
- 通过属性传参
重新创建一个Person.vue组件
在父级template中将Person文件引入进来,并在div中编写
1 | <person |
在Person标签中添加属性,类似于我们在div中编写行间样式一样。height前面加上: 表示变成动态属性。
由于组件实例的作用域是独立的,这意味着在子组件的模板中不能直接引用父组件的数据,而要子组件使用父组件的数据,我们需要通过子组件的props选项
而props可以直接定义为1
props:['username','sex','height'],
也可以类似于Schema定义方式,这样定义类型之后,由于我们在父组件中的height是动态属性,即会根据子组件中的类型进行匹配,所以此时传过来的height数Number类型的值
获取到父组件传过来的数据后,就可以直接在页面中直接使用
1 | props:{ |
- 使用插槽方法
这种方法可以直接引用公共部分,如引用公共部分的头部,尾部等
新建一个mySlot组件
在父组件中引用该组件,并在div中编写
1 | <my-slot> |
在mySlot文件中的div接收从父组件传递过来的数据,用slot标签,而且使用header 、 footer文件时,需要早mySlot 加上name属性
1 | <template> |
1 | <template> |
1 | <template> |