vue ---- 组件

组件： 对UI解构的封装
组件的三个组成部分

• template
• script
• style

<template>
  <h3>{{ username }}</h3>
</template>
<script>
//默认导出，固定写法
export default {
  //组件中的data不能是个对象
  data(){
    //这个return出去的{}中，可以定义数据
    return{
      username: 'GaiGai'
    }
  }
}
</script>
<style>
</style>

在组件中绑定事件，这里的this指代的是组件的实例，只有数据源和HTML中使用不同，其他都是相同的
在Template中只允许有一个根元素
启动less需要加上lang=“less”

<template>
  <div>
    <h3 @click = "changeName">{{ username }}</h3>
  </div>
</template>
<script>
export default {
  data(){
    return{
      username: 'GaiGai'
    }
  },
  methods:{
    changeName(){
      this.username = "GuaiGuai"
    }
  },
  //当前组件的监听器
  watch:{},
  name: 'App',
  //当前组件的计算属性
  components: {},
  //当前组件中的过滤器
  filters:{}
}
</script>

案例

注意： 在components注册的是私有子组件

注册全局组件

在main.js 入口文件中，通过 Vue.component()方法，可以注册全局组件

//导入需要全局注册的组件
import Count from '@/components/Count.vue'

//参数1： 字符串格式，表示组件的“注册名称”
//参数2： 需要被全局注册的哪个组件
Vue.component('MyCount',Count)

props 自定义属性

props: ['属性一','属性二']这个是功能最少的格式： 只能接收值
props 中的值 可以看作是只读的，不能直接修改props的值，否者会报错

    props: {
        //自定义属性
        init: {
            //指定默认值
            default: 0,
            //规定该属性必须传递什么类型的数据： Number,Boolean,String,Array,Object
            type:Number,
            //必填项检验
            required: true,
        },
    },

如果没有传值会有默认值，如果指定类型传递的不是指定类型，控制台会报错
如果必传却没传控制台也会报错

    data() {
        return {
            count: this.init
        }
    }

如果需要操作初始化过来的值，需要在传递过来时就转存到数据源中

<button @click="count += 1">+1</button>
当一个事件函数中只有一条语句的时候可以这样简写

<MyCount :init="9"></MyCount>
:init 绑定的是 js 中的数值， 而 init 则是字符串

组件间的样式冲突

vue组件中的样式是全局生效的，易造成多个组件之间的样式冲突问题。

根本原因：

1. 单页面应用程序中，所有组件的dom结构，都是基于唯一的index.html呈现的
2. 每个组件中的样式，都会影响整个index.html页面的dom元素
   

父组件修改子组件样式问题