vue inline-template内联模板的使用

最新推荐文章于 2025-05-03 07:48:19 发布

原创最新推荐文章于 2025-05-03 07:48:19 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue基础专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中的inline-template特性，它允许将组件内部的模板直接定义在父组件中，从而替换组件自身的template。内联模板使得可以直接访问组件的数据和方法，无需传递参数。示例代码展示了如何在父组件中使用inline-template，并通过一个例子解释了当父组件和子组件样式冲突时的优先级规则。同时，文章还探讨了CSS权重对样式生效的影响。

首先来看官方文档的说法：
在这里插入图片描述
官方文档中说的不是很通俗，其实 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;
}

在这里插入图片描述

vue inline-template内联模板 的使用

vue inline-template内联模板的使用