之前说要学习一下VUE的组件通讯机制,但是因为公司的任务比较多且急,连续两个大的项目模块,合规的和反洗钱真的自己全身心的投入到其中了,连续加了几周的班,今天休息了一下,刚好把vue部分父子组件的通讯方式梳理了一下,就写点总结吧。
基本用法
Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可。
Vue.component('child', {
...
// 接收message
props: ['thisData']
...
})
由于HTML中的属性是不区分大小写的,所以当使用DOM中的模板(HTML中)时,thisData需要转化为this_data。但是,如果使用字符串模板(JS中)时,不受限制,可以为所欲为
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态。
每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop.
Prop中的静态和动态值
在正常情况下,一般在父组件中通过v-bind定义一个动态值,子组件通过Prop接收该值,所以,很多人认为,Prop只能接收动态值。但是,其实Prop可以接受静态属性。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
<!--静态传递数据-->
<my-component message="hi~