|
1 在comp-part1标签中，我们看到这样一个属性，onevt-type3="evtTypeHandler"，这是指，在该节点上绑定了名为evtType3的要领，被触发后，执行evtTypeHandler的函数，在下文的‘父子之间组件变乱转达’中，会看到怎样触发该要领。
2 代码中的evtType1Emit要领，该要领通过挪用$broadcast要领，触发了名为'evtType1'的变乱，并转达了params参数，'evtType1'变乱也可以在下文‘父子组件之间变乱转达’中看到。
转达数据与数据改革
如上面所述，父组件向子组件转达数据，通过在子组件的props属性中声明对外袒露的属性名称，然后在组件引用标签上声明转达的父组件数据。
假如你必要在子组件中对数据举办改革，但又不想窜改父组件数据时，可以行使$watch()来满意需求。假如是监听工具中的属性，参数请行使.支解，如：$watch(xxx.xxx.xxx, methodName)
示譬喻下：
- <script>
-
- // 子组件
-
- export default {
-
- props: [
-
- 'prop1',
-
- 'prop2Object'
-
- ],
-
- data () {
-
- return {
-
- upperProp1: this.prop1
-
- }
-
- },
-
- onInit () {
-
- console.info(`外部转达的数据：`, this.prop1, this.prop2Object)
-
- // 监听数据变革
-
- this.$watch('prop1', 'watchPropsChange')
-
- this.$watch('prop2Object.name', 'watchPropsChange')
-
- },
-
- /**
-
- * 监听数据变革，你可以对数据处理赏罚后，配置值到data上
-
- * @param newV
-
- * @param oldV
-
- */
-
- watchPropsChange (newV, oldV) {
-
- console.info(`监听数据变革：`, newV, oldV)
-
- this.upperProp1 = newV && newV.toUpperCase()
-
- }
-
- }
-
- </script>
表明一下
上面是子组件的代码，我们看到data中界说了upperProp1，同时也看到watchPropsChange要领中，有两个参数，一个是newV,指变革后的属性值，oldV指原先的属性值，将newV赋值给upperProp1，这样在子组件中对数据upperProp1举办改革，就不会窜改父组件原先的数据。
父子组件之间的变乱转达
当子组件对数据举办改革后，把最终数据交给父组件乃至往上，每每有两种步伐
1、父组件转达的数据自己就是工具，子组件直接修改的就是这个工具中的属性；那么父组件同样也就拿到了最终数据
2、子组件在data中生涯了一份内部数据，必要交给父组件：子组件通过$dispatch()完成变乱触发，父组件通过$on()绑定变乱并相应，如：evtType2；
相同于2，子组件在data中生涯了一份内部数据，必要交给父组件：子组件通过$emit()触发在节点上绑定的变乱来执行父组件的要领，如：evtType3；
示譬喻下：
- <script>
-
- // 子组件
-
- export default {
-
- props: [
-
- 'prop1',
-
- 'prop2Object'
-
- ],
-
- data () {
-
- return {
-
- upperProp1: this.prop1
-
- }
-
- },
-
- onInit () {
-
- console.info(`外部转达的数据：`, this.prop1, this.prop2Object)
-
- // 绑定VM的自界说变乱
-
- this.$on('evtType1', this.evtTypeHandler)
-
- // 这里我以为官网的代码示例存在题目，因此注释掉了，此处应该将其移至父组件的onInit要领中。
-
- //this.$on('evtType2', this.evtTypeHandler)
-
- },
-
- evtTypeHandler (evt) {
-
- console.info(`子组件：变乱相应: `, evt.type, evt.detail)
-
- // 竣事情乱转达
-
- // evt.stop()
-
- },
-
- evtType2Emit () {
-
- this.$dispatch('evtType2', { params: '特殊参数' })
-
- },
-
- evtType3Emit () {
-
- this.$emit('evtType3', { params: '特殊参数' })
-
- }
-
- }
-
- </script>
表明一下
在上文我已做了如下声名 （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
