第五节随堂笔记
一、知识点部分
- 子组件通过事件向父组件通信(传值):1.首先给父组件中绑定自定义事件,在子组件中触发原生事件(比如:click、input、onchange等…),然后在函数中使用$emit触发自定义事件(比如笔记中的childHandler),父组件收到的数据可在父组件中任意使用。
二、代码部分
Document
<div id="app"></div>
<script src="js/vue.min.js"></script>
<script>
//1.Parent组件 2.Child组件
Vue.component('Parent',{
data(){
return{
msg:'我是来自父组件的数据'
}
},
template:`
<div>
<p>我是一个父组件!</p>
<Child :childData="msg" @childHandler="childHandler" />
</div>
`,
methods:{
childHandler(val){
console.log(val);
}
}
})
Vue.component('Child',{
template:`
<div>
<p>我是一个子组件!</p>
<input type="text" v-model="childData" @input="changeValue(childData)" />
</div>
`,
props:['childData'],
methods:{
changeValue(val){
//$emit 属于监听
//在函数中使用$emit触发自定义事件,$emit(自定义事件名,传递的数据)
this.$emit('childHandler',val);
}
}
})
var App = {
components:{
},
template:`
<div>
<Parent/>
</div>
`
}
new Vue({
el:'#app',
data(){
return{
}
},
components:{ //挂载组件
App
},
template:`
<App/>
` //调用组件
})
</script>