一、Vue.js组件通信介绍
子组件如何获取父组件中的数据？父组件如何得知子组件的数据变更？如果是更加复杂的组件关系呢？在组件间传递数据的操作，称为组件通信。
二、Vue.js组件通信内容
• 父组件向子组件传值
• 子组件向父组件传值
• 非父子组件传值
• 其他通信方式
三、父组件向子组件传值
• 通过子组件的 props 选项接收父组件的传值。
• 注意：props 不要与 data 存在同名属性。
<body>
<div id="app">
<!-- 静态属性设置 -->
<my-com-a title="这是标题" content="这是内容"></my-com-a>
<!-- 动态属性绑定 -->
<my-com-a :title="'这是标题内容,演示'" :content="'这是内容'"></my-com-a>
<!-- 动态属性绑定:常用 -->
<my-com-a v-bind:title="items.title" :content="items.content"></my-com-a>
</div>
<script src="vue.js"></script>
<script>
Vue.component('my-com-a',{
props: ['title','content'],
template: `
<div>
<h3>{{ title }}</h3>
<p> {{ content }} </p>
</div>
`
})
new Vue({
el: '#app',
data: {
items: {
title: '这是标题',
content: '这是内容'
}
}
})
</script>
</body>
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
