组件与组件之间的传值

组件用component表示 是vue最强大的功能之一 组件化开发

组件可以扩展HTML元素，封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

image

组件分为全局组件和局部组件

全局组件

Vue.component("组件名"，{
     template:`代码`
  })

局部组件

new Vue({
    el:"选择器名"，
    components：{
       组件名:"代码"
    }
})

例子
_{点击是实现文字的切换}

``html
  

        
    
    
``js
    

组件之间的传值

组件传值分为父传子、子传父、同级互传

父传子：

``html

        
    
    
    

、

显示为：

菜鸟教程

菜鸟教程

gcuyxhm

---

用父传子实现列表

显示为：

水果

苹果
香蕉
鸭梨

---

子传父：

注:

prop(用于父传子)

prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

$emit( event, […args] )(用于子传父)

触发当前事件。附加参数都会传给监听器回调。
子组件通过$emit来触发事件，将参数传递出去