1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    
    <hr>    
    <hr>
    <div id="app-1">
        <my-component></my-component>
    </div>
 
    <script>
        Vue.component('my-component',{
            template: `
            <div>
            {{ name }}<br>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        });
 
        const app = new Vue({
            el: '#app',
        });
 
        const app1 = new Vue({
            el: '#app-1',
        });
    </script>
</body>
 
</html>
cs



컴포넌트를 다른컴포넌트에서도 사용가능하다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    
    <hr>    
    <hr>
    <div id="app-1">
        <my-component></my-component>
    </div>
 
    <script>
        Vue.component('hello-world',{
            template: '<div>hello world </div>'
        });
        
        Vue.component('my-component',{
            template: `
            <div>
            {{ name }}<br>
            <hello-world/>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        });
 
        const app = new Vue({
            el: '#app',
        });
 
        const app1 = new Vue({
            el: '#app-1',
        });
    </script>
</body>
 
</html>
cs




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <title></title>
</head>
 
<body>
    <div id="app">
        <my-component/>
    </div>
    
      <script>
        Vue.component('hello-world',{
            template: '<div>hello world </div>'
        });
 
        const KossieButton = {
            template: `
            <div>
            {{ name }}<br>
            <hello-world/>
            <button @click="changeText">Click</button>
            </div>
            `,
            data(){
                return{
                    name : 'koko'
                }
            },
            methods: {
                changeText(){
                    this.name = 'kossie updated'
                }
 
            }
        };
 
        const app = new Vue({
            el: '#app',
            components:{
                'my-component' : KossieButton
            }
        });
 
      
    </script>
</body>
 
</html>
cs


저작자표시

'Vue' 카테고리의 다른 글

싱글 파일 컴포넌트에서 props $emit 구현하기  (0) 2020.02.22
동일한 컴포넌트로 데이터 넘기기 props $emit 사용  (0) 2020.02.18
여러개의 Vue인스턴스 사용하기  (0) 2020.02.16
v-for 리스트렌더딩  (0) 2020.02.15
v-if, v-show 버튼클릭시 보이게 안보이게  (0) 2020.02.15

+ Recent posts

티스토리툴바