目录：

1. 模板引用

1.1 ref 获取元素

1.2 ref 修改内容

2. 组件组成

2.1 组件结构

2.2 定义组件

2.3 使用组件

2.4 组件嵌套

模板引用

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute

注意：

若没有特殊需求，不要操作DOM，ref 特别消耗性能

ref 获取元素

示例源码：

<template>    <h1>{{ title }}</h1>    <p ref="content">{{ content }}</p>    <button @click="getElementHandle">获取元素</button></template><script>// 内容改变：{{模板语法}}// 属性改变：v-bind:// 事件：v-on：clickexport default{    data(){        return{            title:"模板引用",            content:"模板内容"        }    },    methods:{        getElementHandle(){            // 获取元素            console.log(this.$refs.content);        }    }}</script>

示例效果：

ref 修改内容

示例源码：

<template>    <h1>{{ title }}</h1>    <p ref="content">{{ content }}</p>    <button @click="getElementHandle">获取元素</button>    <button @click="changeElementHandle">修改内容</button></template><script>// 内容改变：{{模板语法}}// 属性改变：v-bind:// 事件：v-on：clickexport default{    data(){        return{            title:"模板引用",            content:"模板内容"        }    },    methods:{        getElementHandle(){            // 获取元素            console.log(this.$refs.content);        },        changeElementHandle(){            console.log('原内容',this.$refs.content.innerHTML);            this.$refs.content.innerHTML = "内容已修改";            console.log('新内容',this.$refs.content.innerHTML);        }    }}</script>

示例效果：

组件组成

组件最大的优势就是可复用性

组件结构

<template>// ……</template><script>export default{}</script><style>// ……</style>

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

<template>    <h1>{{ title }}</h1></template><script>export default{    data(){        return {            title:"自定义一个组件"        }    }}</script>

当不使用构建步骤时，一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义：

export default{    data(){        return {            title:"自定义一个组件"        }    },    template: `<h1>{{ title }}</h1>`}        

这里的模板是一个内联的 JavaScript 字符串，Vue 将会在运行时编译它。你也可以使用 ID 选择器来指向一个元素 (通常是原生的 <template> 元素)，Vue 将会使用其内容作为模板来源。

使用组件

要使用一个子组件，我们需要在父组件中导入它。

分三步使用组件：

引入组件注入组件显示组件

<template>  <h1 class="title">{{ title }}</h1>  <!-- 3. 显示组件 -->  <CustomComponent /></template><script>// 1. 引入组件import CustomComponent from './components/CustomComponent.vue';export default{  data(){    return {      title:"组件"    }  },  // 2. 注入组件  components:{    CustomComponent  }}</script><style scoped>/* scoped:让当前样式只在当前组件中生效 */.title{  font-size: 30px;  color:blueviolet;}</style>

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构。

这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

定义组件以及引用Header

<template>    <h3>{{ title }}</h3></template><script>export default{    data(){        return {            title :"Header"        }    }}</script><style scoped>h3{    width: 100%;    height: 100px;    border: 5px solid #889;    text-align: center;    line-height: 100px;}</style>

<template>    <div class="main">        <h3>Main</h3>    </div></template><script>    export default {    }</script><style scoped>    .main{                float: left;        width: 70%;        height: 400px;        border: 5px solid #999;        box-sizing: border-box;        border-top: 0px;    }</style>

<template><div class="aside">    <h3>Aside</h3></div></template><script>export default{}</script><style scoped>.aside{    float:right;    width: 30%;    height: 400px;    border: 5px solid #889;        box-sizing: border-box;}</style>

<template>    <h3>{{ title }}</h3></template><script>export default{    data(){        return{            title:"Article"        }    }}</script><style scoped>h3{    width: 90%;    margin: 0 auto;    text-align: center;    background-color:blueviolet;    box-sizing: border-box;    margin-top: 50px;    line-height: 100px;}</style>

<template>    <h3>{{ title }}</h3></template><script>export default{    data(){        return{            title:"Item"        }    }}</script><style scoped>h3{    width: 90%;    margin: 0 auto;    text-align: center;    background-color:cadetblue;    box-sizing: border-box;    margin-top: 10px;    line-height: 100px;}</style>

<template>  <Header />  <Main />  <Aside /></template><script>import Header from './pages/Header.vue';import Main from './pages/Main.vue';import Aside from './pages/Aside.vue';export default{  components:{    Header,    Main,    Aside  }}</script><style scoped></style>

<template>    <div class="main">        <h3>Main</h3>        <Article />        <Article />    </div></template><script>import Article from './Article.vue';    export default {        components:{            Article        }    }</script><style scoped>    .main{                float: left;        width: 70%;        height: 400px;        border: 5px solid #999;        box-sizing: border-box;        border-top: 0px;    }</style>

<template><div class="aside">    <h3>Aside</h3>    <ItemVue />    <ItemVue />    <ItemVue /></div></template><script>import ItemVue from './Item.vue';export default{    components:{        ItemVue    }}</script><style scoped>.aside{    float:right;    width: 30%;    height: 400px;    border: 5px solid #889;        box-sizing: border-box;}</style>