Vue-30、Vue非单文件组件。

非单文件组件:
一个组件包含n个组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="root">
    <!--第三步:编写组件标签-->
    <xuexiao></xuexiao>
    <hr>
    <!--第三步:编写组件标签-->
    <xuesheng></xuesheng>
</div>

<script type="text/javascript">
    Vue.config.productionTip=false;
    //第一步创建school组件
    const school = Vue.extend({
        //el:'#root'   //一定不要写el 配置项,因为最终所有的组件都要被一个vm 管理,由vm决定服务于那个容器。
        template:`
          

学校名称:{{schoolName}}

学校地址:{{address}}

`
, data(){ return{ schoolName:'清华大学', address:'北京', } }, methods:{ showName(){ alert(this.schoolName) } } }); //第一步创建student组件 const student = Vue.extend({ template:`

学生姓名:{{studentName}}

学生年龄:{{age}}

`
, data(){ return{ studentName:'张仨', age:18, } } }); //创建hello组件 const hello = vue.extend({ template:`

你好啊:{{name}}

`
, data(){ return{ name:'李四', } } }); //全局注册 Vue.component('hello',hello); new Vue({ el:"#root", data:{ msg:'消息' }, //第二步:注册组件(局部注册) components:{ xuexiao:school, xuesheng:student } }) </script> </body> </html>

总结:
Vue-30、Vue非单文件组件。_第1张图片
注意点

Vue-30、Vue非单文件组件。_第2张图片

组件的嵌套:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="root">
    <app></app>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    //第一步student组件
    const  student = Vue.extend({
        template:`
        

学生姓名:{{studentName}}

学生年龄:{{age}}

`
, data(){ return{ studentName:'张仨', age:18, } } }); //第一步创建school组件 const school = Vue.extend({ //el:'#root' //一定不要写el 配置项,因为最终所有的组件都要被一个vm 管理,由vm决定服务于那个容器。 template:`

学校名称:{{schoolName}}

学校地址:{{address}}


`
, data(){ return{ schoolName:'清华大学', address:'北京', } }, components:{ student } }); //第一步创建hello组件 const hello = { name:'hello', template:`

{{msg}}

`
, data(){ return{ msg:'欢迎你', } } }; //定义app组件 const app = Vue.extend({ template:`
`
, components:{ hello, school } }); new Vue({ el:"#root", data:{ msg:'消息' }, components:{ app } }) </script> </body> </html>

你可能感兴趣的:(vue,vue.js,前端,javascript)