Vue 组件学习笔记
局部组件的使用
简易 demo
<div id="app"></div>
<script>
// 1. 声明子组件
var Vheader = {
template: '<div>我是头部组件</div>'
}
var App = {
template: '<div>我是入口组件</div>'
}
new Vue({
el: '#app',
data() {
return {}
},
// 2. 挂载子组件
components: {
App
},
// 3. 使用子组件
template: '<App/>'
})
</script>
组件通信
总结：
- 子组件通过 props 接受父组件的数据
- 子组件通过$emit 触发父组件的自定义事件来向父组件传递数据
组件通信：子 => 父 demo
Vue.js 的文件路径记得修改
- 先给父组件中绑定自定义属性
- 在子组件中使用 props 接收父组件传递的数据
- 可以在子组件中任意使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>组件通信-通过prop往子组件通信</title>
<script type="text/javascript" src="JS/Vue.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
// 2. Child组件
var Child = {
template: `
<div>
<p>我是一个子组件:{{ childData }}</p>
<input type="text" v-model='childData' />
</div>
`,
props: ['childData']
}
// 1. Parent组件
var Parent = {
data() {
return {
msg: '我是父组件的数据'
}
},
template: `
<div>
<p>我是一个父组件</p>
<Child :childData='msg'/>
</div>
`,
components: {
Child
}
}
var App = {
data() {
return {}
},
template: `
<div>
<Parent/>
</div>
`,
components: {
Parent
}
}
new Vue({
el: '#app',
data() {
return {}
},
components: {
App
},
template: `
<App/> `
})
</script>
</body>
</html>
组件通信：父 => 子 demo
- 在父组件绑定
自定义的事件 - 在子组件中触发原生的事件，在函数中使用$emit 触发自定义的事件(childHandler)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>通过事件向子组件通信</title>
<script type="text/javascript" src="JS/Vue.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
// Child组件
var Child = {
template: `
<div>
<p>我是一个子组件:{{ childData }}</p>
<input type="text" v-model='childData' @input='changeValue(childData)' /> // v-model改变传递的数据会报warn，本例只是演示，不必顾虑
</div>
`,
methods: {
changeValue(val) {
// 在函数中
// $emit(自定义的事件名，传递的 消息)
// 自定义的事件一定通过this.$emit去触发
this.$emit('childHandler', val)
}
},
props: ['childData']
}
// Parent组件
var Parent = {
data() {
return {
msg: '我是父组件的数据'
}
},
// childHandler为父组件绑定的自定义事件（步骤1）,@是v-on的缩写，用于监听事件
template: `
<div>
<p>我是一个父组件</p>
<Child :childData='msg' @childHandler='childHandler'/>
</div>
`,
methods: {
childHandler(val) {
console.log(val)
}
},
components: {
Child
}
}
var App = {
data() {
return {}
},
template: `
<div>
<Parent/>
</div>
`,
components: {
Parent
}
}
new Vue({
el: '#app',
data() {
return {}
},
components: {
App
},
template: `
<App/>
`
})
</script>
</body>
</html>
最后小结：在本例中，父组件上为子组件绑定 childHandler 方法，子组件绑定 changeValue 方法，而在 changeValue 方法中，使用 this.$emit()向父组件的方法 childHandler 传递数据，即完成了父子组件之间的通信。
