【Vue】非单文件组件

组件化编程

组件的定义:
实现应用中局部功能代码和资源的集合

非单文件组件:
一个文件中包含有n个组件。

使用组件的三大步骤:
1.定义组件(创建组件)
2.注册组件
2.使用组件(写组件标签)

如何定义一个组件:
使用Vue.extend(options)创建,其中optionsnew Vue(options)时传入的哪个options几乎一样,但也有点区别:
1.不要写el --最终所有组件都经过一个vm的管理,由vm中的el决定哪个容器。
2.data必须写成函数 --避免组件被复用时,数据存在引用关系
备注:使用template可以配置组件结构。

如何注册组件:
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component('组件名',组件)

案件:

<html>
<head>
    <meta charset='UTF-8'>
    <title>title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'>script>
head>
<body>
    <div id='root'>
        
        <school>school>
        <hr>
        <student>student>
        <hr>
        <hello>hello>
    div>
body>
<script>
    Vue.config.productionTip = false;
    //第一步,创建school\student组件
    const school = Vue.extend({
        template:`

学校名称:{{schoolName}}

学校地址:{{schoolAddress}}

`
, //一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm管理决定服务于哪个组件 data(){ return{ schoolName:'北京市忠德学校', schoolAddress:'北京市朝阳区' } }, methods:{ showName(){ alert(this.schoolName) } } }) const student = Vue.extend({ template:`

学生名称:{{studentName}}

学生地址:{{studentAge}}

`
, data(){ return{ studentName:'张三', studentAge:18 } } }) const hello = Vue.extend({ template:`

你好!{{name}}

`
, data(){ return{ name:'Tom' } } }) //第二步,全局注册组件 Vue.component('hello',hello); new Vue({ el:'#root', //第二步,局部注册组件 components:{ school,student } })
script> html>

你可能感兴趣的:(Vue,vue.js)