vue inline-template内联模板 的使用

首先来看官方文档的说法：

官方文档中说的不是很通俗，其实 inline-template内联模板 就是my-component组件标签内本应该是默认slot的部分，整体替代了原有的my-component组件的templete，并且该区域可以自由访问my-component组件内的data、method等（不需要任何传参操作就能直接访问）可以理解为就是整个替换了原本my-component的templete部分
我们在实际代码中看看inline-template怎么使用

父组件：

	<myCom inline-template>
      <div class="myCom">
        <p @click="myNum++">增加myNum</p>
        <p>{{myNum}}</p>
        <p @click="jumpMess">弹出消息</p>
      </div>
    </myCom>

myCom组件：

<template>
  <div class="myCom">
    <div @click="myNum++">myComde的增加</div>
    <input type="text" v-model="myNum">
  </div>
</template>
<script>
export default {
  name: 'myCom',
  data() {
    return {
      myNum: 0,
    }
  },
  methods: {
    jumpMess() {
      alert(123);
    }
  }
}

效果图：

你会发现，其实内联模板inline-template就是替换了原有的组件文件的template部分，另外，style部分如果父组件和子组件有冲突，会优先使用父组件的，例如代码中在父子组件都有一个myCom的class，父组件的class是


父组件：

.myCom{
  border: 1px solid red;
}

子组件：

.myCom{
  border: 1px solid green;
  background: yellow;
}

会发现border: 1px solid red;与background: yellow;生效了，

但是当css权重不同时，还是优先权重。
子组件：

.myCom{
  border: 1px solid green !important;
  background: yellow;
}