|
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>
解释一下
在上文我已做了如下说明 （编辑：晋中站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
