props选项传递数据
组件间的通信
-
组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B。它们之间必然需要相互通信：父子组件之间需要通信：<strong>父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。</strong>
-
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。如下图所示：
props-events
1.组件传值props —— 父组件传递数据给子组件</strong>
- prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “props”：
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
- 简单的传值
<body>
<div id="app">
<sk-component message="你好,老铁"></sk-component>
</div>
<div id="dom">
<sk-component message="今天sk实在是666,萌萌哒"></sk-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1.创建一个组件
Vue.component('sk-component', {
//props选项 父组件向子组件传值
props:['message'],
//子组件
template:'<h1>{{message}}</h1>'
});
//2.vue实例
new Vue({
el:'#app'
});
new Vue({
el:'#dom'
});
</script>
HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）。
2.动态绑定传递数据
- 父组件传值给子组件，动态绑定
<body>
<div id="app">
<!--注意:父子组件传值, 动态绑定-->
<my-parent :imagesrc="img" :title="content"></my-parent>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1.定义子组件
var Child = Vue.extend({
props:['src'],
//注意绑定
template:''
});
//2.定义父组件
var Parent = Vue.extend({
props:['imagesrc', 'title'],
//注册子组件
components:{
'my-child':Child
},
//注意绑定
template:`
<div>
<my-child :src="imagesrc"></my-child>
<p>{{title}}</p>
</div>
`
});
//3.实例化vue
Vue.component('my-parent', Parent);
new Vue({
el:"#app",
data:{
img:'images/pic1.jpeg',
content:'不一样的风景很美'
}
})
</script>
- 父组件传递数据给子组件图解
vueb4.png
命名规范
- HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
- 如果你使用字符串模版，则没有这些限制。
网友评论