vue2.0入门及实战开发(二)

<div>
  <header-vue></header-vue>
  <body-vue></body-vue>
  <footer-vue><footer-vue>
</div>


引入子组件对象
import headerVue from './components/header.vue';
import bodyVue from './components/body.vue';
import footerVue from './components/footer.vue';

声明全局组件
Vue.component('headerVue',headerVue)
Vue.component('bodyVue',bodyVue)
Vue.component('footerVue',footerVue)

export default{
  data(){
   return {

   }
  }
  methods:{

  }
  components:{
    headerVue:headerVue
    bodyVue, 简写
    footerVue
  }
}

全局组件的使用  在main.js中
Vue.component()

全局组件，使用更为方便，不需要声明，直接用
在main.js中引入一次，在main.js中使用  vue.component('组件名',组件对象)


props传递参数
<div>我是头{{textone}}</div>

<header-vue textone="大"></header-vue>
<body-vue v-bind:texttwo="text2"></body-vue>

props:['textone'] 在head.vue中声明
props:['texttow'] 在body.vue中声明

footer.vue 
export default{
   data(){
     return {
       text2:'哈哈哈',
    }
  }
}

header.vue
export default{
    data(){
      return{

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


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


子组件需要声明
根属性props:['prop1','prop2']
在页面中直接使用{{prop1}}

在js中应该如何使用prop1呢？
this.prop1获取 


注意：
<style lang="scss">
  @import './style/common'
  .router-fade-enter-active,.router-fade-leave-active{
    transition:opacity .3s;
  }
  .router-fade-enter,.router-fade-leave-active{
     opacity:0;
  }

注意：
script中的import是js的语法, 是在js中去引用css文件

style中的@import是stylus的语法>


注意：如果需要在vue文件style标签中使用scss的话，需要声明一下：
<style rel="stylesheet/scss" lang="scss">

同时在webpack.base.config.js中也要配置scss
     {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': 'style-loader!css-loader!sass-loader'
          }
        }
      }