【学习Vue】父组件传值到子组件

  一.组件定义

    组件类似于需要多个地方用到的方法，在Vue中，组件就是一种复用（经常使用）一个功能的手段。

    而组件使用开发的核心就是父子组件之间的数据传递。

    父组件、子组件定义：引入封装的组件的文件叫做父组件，被引入的组件叫做子组件。

二.实例：

  1.组件注册：

        格式：如 Vue.component('my-component-name', { /* ... */ })     

                   组件名就是 上文的 "'my-component-name"，可以自行定义名字

                   正如我创建的组件名为school 

              注册之后，我们可以在html里面  使用组件名同名的标签 ，从而取得与组件之间的联系         

                                                  

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里面写好展示区：

             

选择的学校为：{{chooseSchool}}

     4.在父元素里面写好方法

     5.在列表里面写好@cschool=“changeEvent”  从而将$emit与父元素联系起来   

这样子组件就能传递给父组件数据从而改变页面内容

如有错误，欢迎各位指出