vue 组件基本使用

作者: ropon 分类: Vue 发布时间: 2019-01-05 15:10
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <!--使用自定义组件钩子-->
    <App></App>
</div>
<script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script>
<script>

    let vBtn = {
        data() {
            return {

            }
        },
        props: ["id"],
        template: `
            <div>
                <button @click="handlerClick">{{ id }}</button>
            </div>
            `,
        methods: {
            handlerClick() {
                //每个组件中的this指的就是当前组件对象
                this.id++;
                // this.$emit("父组件声明自定义事件名", "传值");
                this.$emit("clickHandler", this.id);

            }
        }
    };


    let vHeader = {
        data() {
            return {
                msg_info: "我是vHeader子组件的数据"
            }
        },
        //声明挂载父组件的数据
        props: ["msg", "post"],
        //子往父传值,父组件自定义事件 @clickHandler="clickHandler"
        template: `
            <div id="cc">
                我是头部区域组件
                <h2>{{ post.info }}</h2>
                <h2>{{ post.id }} -- {{ post.title }}</h2>
                <h2>{{ post.content }}</h2>
                <vBtn :id="post.id" @clickHandler="clickHandler"></vBtn>
            </div>`,
        methods: {
            clickHandler(val) {
                this.post.id = val;
            }

        },
        components: {
            vBtn
        }
    };
    //声明组件钩子
    let App = {
        data() {
            return {
                msg: "测试",
                text: "我是父组件App的数据",
                post: {
                    info: "再次测试",
                    id: 1,
                    title: "Vue从入门到精通",
                    content: "Vue基本语法,Vue基本使用,Vue基本应用"
                }
            }
        },
        //:msg="text" 向子组件传递自定义属性
        //<vHeader :msg="text"></vHeader>
        template: `
            <div id="bb">
                我是父组件的 {{ post.id }}
                <vHeader :post="post"></vHeader>
                我是一个局部组件钩子 {{ msg }}
            </div>`,
        methods: {

        },
        computed: {

        },
        created() {

        },
        components: {
            vHeader
        }
    };

    let vm = new Vue({
        el: "#app",
        //template优先级大于el
        template: `<div id="aa"><App></App></div>`,
        //将之前什么组件钩子挂载到Vue实例中
        components: {
            App: App
        }
    });
</script>
</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!