折腾vue--vue自定义组件（三）

1、创建组件  demo.vue，内容如下：

<template>
  <div>
    <input
      type="button"
      :value="name"
      @click="btnClickHandler"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: ['name'],
  methods: {
    btnClickHandler: function () {
      // this.$emit('btnClick') 用于执行父组件中绑定的事件
      this.$emit('btnClick')
      // 还可以执行单独的组件自己的方法
      alert('子组件的点击')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
</style>

 

ps.

　　a.data最好写返回值，即使是空对象，否则调试时，可以运行，但浏览器会报错，一片红看的不难受么

　　b.props用于参数的传递

　　c.自定义事件，并将自定义事件绑定到button的单击事件中，自定义事件添加代码：this.$emit('btnClick')，此段代码的作用是：在父组件使用绑定自定义事件时，执行父组件中绑定的事件

2、使用<template>

  <div id="app">
    <sw-header name="abc" @btnClick="click"></sw-header>
    <router-view />
  </div>
</template>

<script>
import swHeader from './components/demo'

export default {
  name: 'App',
  components: {
    swHeader
  },
  methods: {
    click: function () {
      alert('父组件的点击事件')
    }
  }
}
</script>

<style lang="scss">
/*去除浏览器默认样式*/
@import './assets/reset.css';
/*sass变量*/
$background: #ccc;

</style>

 

ps.

　　a.引用组件

　　b.注册组件

　　c.参数传递：按照html的普通属性使用即可将参数传递给组件

　　d.定义事件，并绑定到组件的自定义事件中