一.组件定义
组件类似于需要多个地方用到的方法,在Vue中,组件就是一种复用(经常使用)一个功能的手段。
而组件使用开发的核心就是父子组件之间的数据传递。
父组件、子组件定义:引入封装的组件的文件叫做父组件,被引入的组件叫做子组件。
二.实例:
1.组件注册:
格式:如 Vue.component('my-component-name', { /* ... */ })
组件名就是 上文的 "'my-component-name",可以自行定义名字
正如我创建的组件名为school
注册之后,我们可以在html里面 使用组件名同名的标签 <school>,从而取得与组件之间的联系
2.prop
props是组件中非常重要的一个选项。在 Vue 中,父组件通过 props 向下传递数据给子组件 (参考文章:https://www.cnblogs.com/xiaohuochai/p/7388866.html)
组件实例的作用域是孤立的。这意味着不能 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的 props 选项
待prop创立好了模板后,就向html中传递:
注意:html中 school-name 不能写成schoolName(Vue文档中规定好了 https://cn.vuejs.org/v2/guide/components-props.html):
到达这一步后,html便能借助prop提供的模板填写信息
为了接受根组件(父组件)的传值,就必须创建根组件,获取根组件里面的信息,与模板配合,从而快速打印出信息
3.创建根组件
1.如图:
2.在HTML中 将数组schoolList赋予school-name ,这样就能展示出数组中的全部内容
但是如果要分别打印出数组里面的内容就要用到 v-for,然后将 item项目 赋给 school-name (因为item等这些是变量,所以school-name要打 冒号)
最终页面展现的效果为:
补充:子元素向父元素传值
子组件通过$emit()创建一个事件回调函数,来传递数据给父组件
实例
功能:通过点击学校下面的按钮可以在 展示区出现对应的学校名称
1.在 Vue.component 里面添加方法
2.在模板template 里面添加按钮功能。同时括号里面传递数据schoolName,以便后面交给父元素
3.在html里面写好展示区:
<h2>选择的学校为:{{chooseSchool}}</h2>
4.在父元素里面写好方法
5.在列表里面写好@cschool=“changeEvent” 从而将$emit与父元素联系起来
这样子组件就能传递给父组件数据从而改变页面内容
如有错误,欢迎各位指出