본문 바로가기

IT/ETC

Vue notes

반응형

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

<div id="app">

    {{str}} parent instance === {{num}}

    <app-header v-bind:child="num"></app-header>

    <app-content v-on:what="child_to_parent"></app-content>

</div>    

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var appHeader = {

        template: '<div>child component === {{child}}</div>',

        props: ['child']

    }

    var appContent = {

        template: '<div>content<button v-on:click="passem">pass</button></div>',

        methods: {

            passem: function(){

                this.$emit('what', 10);

            }

        }

    }

    new Vue({

        el: '#app',

        data: {

            str: 'hi',

            num: 0,

        },

        components: {

            'app-header'appHeader,

            'app-content'appContent,

        },

        methods: {

            child_to_parentfunction(e){

                console.log(e);

                this.num = e;

            }

        }

    })

</script>

</body>

</html>

반응형

'IT > ETC' 카테고리의 다른 글

Linux study  (0) 2020.04.17
Linux commands  (0) 2020.04.02
프로세스 (chapter 2)  (0) 2020.03.13
운영체제(chapter 1)  (0) 2020.03.13
시스템 소프트웨어  (0) 2020.03.12