示譬喻下:
- <import name="comp-part1" src="./part1"></import>
<import>标签中的的src属性指定自界说组件的地点,name属性指定在<template>组件中引用该组件时行使的标署名称
最终页面界说与引入方法如下:
- <import name="comp-part1" src="./part1"></import>
-
- <template>
-
- <div class="tutorial-page">
-
- <text class="tutorial-title">页面组件:</text>
-
- <text>{{ data1 }}</text>
-
- <text>{{ data2.name }}</text>
-
- <text onclick="evtType1Emit">触发$broadcast()</text>
-
- <comp-part1 prop1="{{data1}}" prop2-object="{{data2}}" onevt-type3="evtTypeHandler"></comp-part1>
-
- </div>
-
- </template>
-
- <style lang="less">
-
- .tutorial-page {
-
- flex-direction: column;
-
- padding: 20px 10px;
-
- .tutorial-title {
-
- font-weight: bold;
-
- }
-
- }
-
- </style>
-
- <script>
-
- // 父组件
-
- export default {
-
- data: {
-
- data1: '转达字符串',
-
- data2: {
-
- name: '转达工具'
-
- }
-
- },
-
- onInit () {
-
- this.$page.setTitleBar({ text: '父子组件通讯' })
-
- this.$on('evtType2', this.evtTypeHandler)
-
- },
-
- evtTypeHandler (evt) {
-
- console.info(`父组件:变乱相应: `, evt.type, evt.detail)
-
- // 竣事情乱转达
-
- // evt.stop()
-
- },
-
- evtType1Emit () {
-
- this.$broadcast('evtType1', { params: '特殊参数' })
-
- }
-
- }
-
- </script>
表明一下
上面的代码中有几点必要声名: (编辑:河北网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|