您的位置：首页 > Web前端 > Vue.js

Vue入门七、父子组件间通讯

2019-05-23 21:56 1271 查看

一、父子组件通讯

父传子：
1、父用子的时候通过属性传递
2、子要声明props:['属性名']接收
3、子组件template中直接用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
// 父传子
var child = {
template: `
<div>我是子组件
{{sendToChild}}
</div>
`,
props: ['sendToChild']
}
var parent = {
template: `
<div>我是父组件
<child sendToChild="send"></child>
</div>
`,
components: {
child
}
}
new Vue({
el: '#app',
template: `
<div>
<parent></parent>
</div>
`,
components: {
parent
}
})
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
// 父传子
var child = {
template: `
<div>我是子组件
{{sendToChild}}
</div>
`,
props: ['sendToChild']
}
var parent = {
template: `
<div>我是父组件
<child v-bind:sendToChild="send"></child>
</div>
`,
components: {
child
},
data() {
return {
send:
{name: 'zhangsan', age: 12}
}
}
}
new Vue({
el: '#app',
template: `
<div>
<parent></parent>
</div>
`,
components: {
parent
}
})
</script>
</body>
</html>

[p]子传父：[url=mailto:br/>1、子组件里通过this.$emit('自定义事件名','变量1','变量2')触发
2、父组件里通过@自定义事件名='事件名'监听1、子组件里通过this.$emit('自定义事件名','变量1','变量2')触发
2、父组件里通过@自定义事件名='事件名'监听

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航