HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vuedemo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
JS
//引入vue框架
import Vue from 'vue'
import App from './App'
new Vue({
el:'#app',
render: function (h){
return h(App)
}
})
子组件
<template>
<section>
<div class="login">
<label>
<span>用户名</span>
<input v-model="username" @change="setUser">
</label>
</div>
</section>
</template>
<script>
export default{
name:'login',
data (){
return {
username:''
}
},
methods:{
setUser:function(){
this.$emit('transferUser',this.username)
}
}
}
</script>
父组件
<template>
<div id="app">
<LoginDiv @transferUser='getUser'></LoginDiv>
<p>用户名称为:{{user}}</p>
</div>
</template>
<script>
import LoginDiv from './components/a'
export default{
name:'app',
data (){
return{
user:''
}
},
methods:{
getUser(msg){
this.user = msg
}
},
components:{
LoginDiv:LoginDiv
}
}
</script>