vue中局部组件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script src="vue.js"></script>
<script>
    //如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容
    //那么template模板的优先级大于el

    // 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content

    //第一步:  声子 Vue中组件的首字母要大写, 跟标签区分
    //组件中的data必须是个函数,一定要有返回值
    let App = { //跟的是一个对象  这个对象里 就是除了下面的Vue中,el以外的所有属性
        data() {
            return {text: "我是子组件"}
        },

        //第四步:  给子组件里写内容.  当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
        //在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************
        template: `
        <div id="a">
            <h2>{{text}}</h2>
        </div>
        `,
        //给子组件定义方法  比如说a标签的超链接
        methods:{

        },
    }

    new Vue({
        el: "#app",  //绑定的是上面的id="app"
        data() {
            return {msg: "alex"}
        },

        //与生命周期有关
        //用模板字符串
        //定义模板
        // 第三步:用子  把<App />写下面就是 用子 但是里面的内容需要写到上面子组件里App里
        // template可以不用写 但是要挂载到 el上去
        template: `
        <div class="app">

            <App><App/>
        </div>
        `,

        components: {
            // 第二步:   挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
            App   //如果key和value一样,可以只写App 替代App:App

        }
    })
</script>
</body>
</html>

局部组件的使用更改以及全局组件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="vue.js"></script>
<script>
    //如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容
    //那么template模板的优先级大于el

    // 全局组件 ***  第一个参数是组件的名字,第二个参数是options
    // 全局组件声明之后,可以再任意的组件里使用, 放到别的组件之后,就成了别的组件的子组件了
    // 使用内置组件slot进行分发  让让别的组件中的Vbtn按钮显示不同的名称  ******
    Vue.component("Vbtn",{
        data(){ return {}},
        template:`<button><slot>按钮</slot></button> `,
    })


    // 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content

    //子组件2
    //第一步:生子2  挂子往App里挂, 不需要挂Vue里
    let Vheader = {//对象
        data(){
            return {}
        },
        //template 是一个组件模板,一定要用一个根(父)元素包裹起来,所以一定要有一个div闭合****
        template:`
        <div>
        <h2>生子是在子组件中</h2>
        <h2 style="color:red">挂子和用子是在父组件中</h2>
        <Vbtn></Vbtn>
        </div>
        `,

    }


    //第一步:  声子   Vue中组件的首字母要大写, 跟标签区分
    //组件中的data必须是个函数,一定要有返回值
    let App = { //跟的是一个对象  这个对象里 就是除了下面的Vue中,el以外的所有属性
        data() {
            return {text: "我是子组件"}
        },

        //第四步:  给子组件里写内容.  当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
        //在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************
        // 第三步:用子2   <Vheader></Vheader>,  下一步去对应模板Vheader的template里写内容
        template: `
        <div id="a">
            <h2>{{text}}</h2>
            <Vheader></Vheader>
            <Vbtn>登录</Vbtn>
            <Vbtn>注册</Vbtn>
            <Vbtn>提交</Vbtn>
        </div>
        `,
        //给子组件定义方法  比如说a标签的超链接
        methods:{
        },
        components:{
            // 第二步:挂子2
            Vheader
        },
    }

    new Vue({
        el: "#app",  //绑定根元素  是上面的id="app"
        data() {
            return {msg: "alex"}
        },

        //根组件中  可以把template删除 直接在id = "app"的div中使用
        // 子组件中的template 不能删除,因为子组件中的结构最终会渲染到id="app"的div里面<App></App>

        components: {
            // 第二步:   挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
            App   //如果key和value一样,可以只写App 替代App:App

        }
    })
</script>
</body>
</html>