组件的样式冲突scoped
默认情况下写在组件中的样式会全局生效，因此会很容易造成多个组件之间的样式冲突问题，可以给组件加上scoped属性，可以让样式只作用于当前组件。

scoped原理？
1.当前组件内标签都被添加data-v-hash值的属性。
2.css选择器都被添加[data-v-hash值]的属性选择器。

组件内的data是一个函数：

export default {
  data(){
    return{
      name:"菜单"
    }
  }
}

父和子组件通讯：
子组件：

<template>
  <div>{{ title }} <button @click="ChangeTitle">修改</button></div>
</template>
<script>
export default {
  //通过prop可以得到父组件的属性
  props: ["title"],
  methods:{
    ChangeTitle(){
      //通过$.emit可以往父组件传递方法
      this.$emit("ParentChangeTitle","来自子组件的修改");
    }
  }
};
</script>

父组件：

<template>
  <div id="app">
    <CommonFooter :title="MyTitle" @ParentChangeTitle="handleChange"></CommonFooter>
  </div>
</template>
<script>
import CommonFooter from './components/CommonFooter.vue'
export default {
  name: 'App',
  components: {
    CommonFooter
  },
  data(){
    return {
      MyTitle : "测试父传子通讯"
    }
  },
  methods:{
    handleChange (obj){
      this.MyTitle = obj;
    }
  }
}
</script>