<!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_parent: function(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 |
