Vue 单文件组件

<template>
  <div>
    hello world - {{myname}}
    <input type="text" v-model="mytext">
    <button @click="handleAdd">新增</button>
    <ul>
      <li v-for="data in datalist" :key=data>
        {{data}}
      </li>
    </ul>
  </div>
</template>
<script>
// ES6导出规范
export default {
  data () {
    return {
      myname: 'YuSheng',
      mytext: '',
      datalist: []
    }
  },
  methods: {
    handleAdd () {
      console.log(this.mytext)
      if (this.mytext.length > 0) {
        this.datalist.push(this.mytext)
        this.mytext = ''
      }
    }
  },
  computed: {

  },
  watch: {

  }
}
</script>
<style lang="scss" scoped>
$width:300px;
ul {
  li {
    background: yellow;
    width: $width;
  }
}
</style>

以上方法和属性都可以用。

注意：scoped 限制样式局部作用域只影响当前

效果：

创建组件

在src下创建mycomponents目录，并在其中创建Navbar.vue文件。

目录结构如下：

文件内容如下：

<template>
    <div>
        navbar
    </div>
</template>

导入

导入到app.vue中后，还需要全局或局部注册组件。

示例如下：

<script>
// ES6 导出规范 -babel(ES6 ==> ES5)
import NavBar from './mycomponents/NavBar'
import Vue from 'vue'

注册

全局注册

把组件在当前页面全局注册。

代码如下：

<script>
// ES6 导出规范 -babel(ES6 ==> ES5)
import NavBar from './mycomponents/NavBar'
import Vue from 'vue'
// 全局注册
Vue.component('NavBar', NavBar)

注意：Vue也不是全局变量了，在哪用需要引入。

局部注册

另一种注册到当前组件方式；如果当前页面有多个Vue实例，

则只能在注册组件的实例中使用组件。

代码如下：

export default {
  data () {
    return {
      myname: 'YuSheng',
      mytext: '',
      datalist: []
    }
  },
  components: {
    NavBar
  },

使用组件

修改NavBar.vue文件内容，改为类似手机端页面的导航。

示例如下：

<template>
    <div>
        <button>left</button>
        navbar
        <button>right</button>
    </div>
</template>

传值

在app.vue中使用时增加传值 => myname = “home”，

示例如下：

<template>
  <div>
    <NavBar myname="首页"></NavBar>
    hello world - {{myname}}
    <input type="text" v-model="mytext">
    <button @click="handleAdd">新增</button>
    <ul>
      <li v-for="data in datalist" :key=data>
        {{data}}
      </li>
    </ul>
  </div>
</template>

接收参数

自定义导航名称

增加自定义导航名称，在navbar组件中接收myname值。

示例如下：

<template>
    <div>
        <button>left</button>
        {{myname}}
        <button>right</button>
    </div>
</template>
<script>
export default {
  props: ['myname']
}
</script>

自定义按钮显示

使用navbar组件时动态绑定一个参数，用来设置是否显示右按钮。

示例如下：

<NavBar myname="首页" :myright="false"></NavBar>

在navber组件中处理传递的myright参数。

并对传递参数格式进行验证。

示例如下：

<template>
    <div>
        <button>left</button>
        {{myname}}
        <button v-show="myright">right</button>
    </div>
</template>
<script>
export default {
  props: {
    myname: {
      type: String,
      default: ''
    },
    myright: {
      type: Boolean,
      default: true
    }
  }
}
</script>

使用插槽

导航增加插槽

在导航中增加slot标签，可在组件调用时，设置自定义内容。

示例如下：

<template>
    <div>
        <button>left</button>
        {{myname}}
        <button v-show="myright">right</button>

        <slot></slot>
    </div>
</template>

传递插槽内容

在app.vue中使用导航组件时，在组件内部可以设定自定义内容。

示例如下：

<NavBar myname="首页" :myright="false">
      <div>这是插槽内容</div>
    </NavBar>

效果如下：

创建SideBar组件

创建组件文件

在mycomponents中再创建SideBar.vue组件文件。

示例如下：

<template>
    <div>
        <ul>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
    </div>
</template>

引入注册

在app.vue中引入并注册

import sidebar from './mycomponents/SideBar'

// ES6导出规范
export default {
  data () {
    return {
      myname: 'YuSheng',
      mytext: '',
      datalist: []
    }
  },
  components: {
    navbar,
    sidebar
  },

调用组件

在app.vue中调用组件

示例如下：

<template>
  <div>
    <navbar myname="首页" :myright="false">
      <div>这是插槽内容</div>
    </navbar>
    <sidebar></sidebar>
    hello world - {{myname}}
    <input type="text" v-model="mytext">
    <button @click="handleAdd">新增</button>
    <ul>
      <li v-for="data in datalist" :key=data>
        {{data}}
      </li>
    </ul>
  </div>
</template>

显示隐藏

由navbar控制sidebar显示隐藏

在app.vue中使用sidebar组件时，增加v-show控制显示和隐藏。

使用全局状态isShow。

<sidebar v-show="isShow"></sidebar>

在data中设置isShow默认不显示。

export default {
  data () {
    return {
      myname: 'YuSheng',
      mytext: '',
      datalist: [],
      isShow: false
    }
  },

接下来navbar里面控制sidebar显示隐藏。

给左按钮绑定事件，在事件中通过this.$emit去触发调用组件中绑定的事件。

示例如下：

<template>
    <div>
        <button @click="handleLeft">left</button>
        {{myname}}
        <button v-show="myright">right</button>

        <slot></slot>
    </div>
</template>
<script>
export default {
  props: {
    myname: {
      type: String,
      default: ''
    },
    myright: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleLeft () {
      console.log('触发')
      this.$emit('event')
    }
  }
}
</script>

父子通信

在app.vue中绑定触发事件，通过父子通信触发事件。

示例如下：

<template>
  <div>
    <navbar myname="首页" :myright="false" @event="handleEvent">
      <div>这是插槽内容</div>
    </navbar>
    <sidebar v-show="isShow"></sidebar>

    hello world - {{myname}}
    <input type="text" v-model="mytext">
    <button @click="handleAdd">新增</button>
    <ul>
      <li v-for="data in datalist" :key=data>
        {{data}}
      </li>
    </ul>
  </div>
</template>
<script>
// ES6 导出规范 -babel(ES6 ==> ES5)
import navbar from './mycomponents/NavBar'
import sidebar from './mycomponents/SideBar'

// ES6导出规范
export default {
  data () {
    return {
      myname: 'YuSheng',
      mytext: '',
      datalist: [],
      isShow: false
    }
  },
  components: {
    navbar,
    sidebar
  },
  methods: {
    handleAdd () {
      console.log(this.mytext)
      if (this.mytext.length > 0) {
        this.datalist.push(this.mytext)
        this.mytext = ''
      }
    },
    handleEvent () {
      this.isShow = !this.isShow
      console.log('触发1')
    }
  },
  computed: {

  },
  watch: {

  }
}