Vue.js基础总结(三)

一：全局组件和局部组件

父和子，使用的父，被用的是子
父需要声明子组件，引入子组件对象，声明方法如下：

引入子组件对象  在app.vue中    
import headerVue from './xxx.vue'

components:{
    headerVue：headerVue
}

<header-vue></header-vue>

全局组件，使用更为方便，不需要声明，直接用

在main.js中引入一次，在main.js中使用vue.component('组件名',组件对象);

import headerVue from './components/header.vue'

Vue.component('headerVue',headerVue);

<header-vue></header-vue>  这个在app.vue中使用 


二：组件间传值
注意：父组件传值给子组件

子组件接收父组件值参数的设置


父组件通过子组件的属性将值进行传递
方式有2：
   常量： prop1="常量值"
   变量： :prop2="变量名"

子组件需要声明
   根属性props:['prop1','prop2']
   在页面中直接使用  {{prop1}}
   在js中应该如何使用prop1？    this.prop1获取



app.vue中   
<header-vue textone="大"></header-vue>  常量
<body-vue -bind:texttwo="text2"></body-vue>   变量

export default{
    data(){
        return{
           text2="哈哈呵呵"
        }
    }
}

header.vue
<div>
    我是{{textone}}头
</div>

export default{
    data(){
        return{

        }
    },
    //接受父组件值参数的设置
    props:['textone']
}