简单通信
父—>子
1.父组件绑定自定义属性
2.子组件props接收
3.子组件任意使用
子—>父
1.父组件绑定自定义方法
2.子组件 $emit(‘事件名’, value) 触发
3.传入父组件
<!--
* @Author: your name
* @Date: 2020-03-31 19:50:40
* @LastEditTime: 2020-03-31 20:17:31
* @LastEditors: Please set LastEditors
* @Description: 父子组件的简单通信
* @FilePath: \x\06.html
-->
<!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"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 全局组件的创建
// 第一个是组件名,第二个是配置选项
// 子传父
// 1.在父组件绑定自定义事件
// 2.子组件触发$emit()
Vue.component('Child', {
template: '<div><p>I am child</p>\
<input type="text" v-model="childData" @input="changeValue(childData)"></div>',
props: ["childData"],
methods: {
changeValue(val) {
// 自定义事件一定通过 $emit 去触发
// $emit(自定义的事件名。消息)
this.$emit('childHander', val)
}
},
})
// 父传子
// 1.先给父组件绑定自定义属性
// 2.子组件props接收数据,可以在子组件任意使用
Vue.component('Parent', {
data() {
return {
msg: 'father msg'
}
},
template: '<div><Child :childData="msg" @childHander="childHander" /></div>',
methods: {
childHander(val) {
console.log(val)
}
},
})
// 局部组件
var App = {
data() {
return {
}
},
methods: {
clickButton(e) {
console.log(this)
}
},
components: {},
template: '<Parent />'
};
console.log(App)
var vm = new Vue({
el: "#app",
data() {
return {
}
},
// 挂载子组件
components: {
App
},
// 父组件可以直接使用
template: '\
<App></App>\
'
});
console.log(vm)
</script>
</body>
</html>