uni组件传值注意

2020-05-25 10:38:07 浏览数 (1)
目录介绍
  • 01.组件传值遇到坑
  • 02.父组件传值给子组件
  • 03.子组件传值给父组件

01.组件传值遇到坑

  • 子组件给父组件传值注意点
    • 注意子组件触发事件定义的方法，首先在父组件中需要绑定子组件内部对应事件，然后一定要和父控件接受的保持一致，否则无法传递数据。//在area.vue中，进行事件触发，传递数据 this.$emit('onConfirm',true, selectVal)
代码语言：txt复制
//在select-school.vue中，需要在在子组件标签上绑定子组件内部对应事件，并且方法名一致
代码语言：txt复制
<!-- 地区选择器 -->
代码语言：txt复制
<optional :status='show' @onUpdate='onUpdate' @onConfirm='onConfirm'></optional>
代码语言：txt复制
```
  • 遇到疑问？
    • 要是同级的组件，那么该如何传递数据呢？

02.父组件传值给子组件

  • 父组件的代码如下<!-- 父组件传子组件 --> <!-- 父组件内部写法 --> <template> <view> <h2>父组件</h2> <!-- 绑定自定义属性传递数据 --> <children style="color: #0000FF;" :value="valPar" ></children> </view> </template>
代码语言：txt复制
<script>
代码语言：txt复制
    //引入子组件
代码语言：txt复制
    import children from "../../pages/ele/element-children1.vue"
代码语言：txt复制
    export default {
代码语言：txt复制
        data() {
代码语言：txt复制
            return {
代码语言：txt复制
                valPar:"父组件传递过来的值"
代码语言：txt复制
            }
代码语言：txt复制
        },
代码语言：txt复制
        components:{
代码语言：txt复制
			//注册子组件
代码语言：txt复制
            children
代码语言：txt复制
        },
代码语言：txt复制
    }
代码语言：txt复制
</script>
代码语言：txt复制
```
  • 子组件的代码如下<!-- 父组件传子组件 --> <!-- 子组件内部写法 --> <template> <h2>子组件收到:{{value}}</h2> </template>
代码语言：txt复制
<script>
代码语言：txt复制
    export default {
代码语言：txt复制
        props:{
代码语言：txt复制
            value:{
代码语言：txt复制
                type:String,
代码语言：txt复制
                default:"默认值"
代码语言：txt复制
            }
代码语言：txt复制
        },
代码语言：txt复制
        data() {
代码语言：txt复制
            return {
代码语言：txt复制
            }
代码语言：txt复制
        },
代码语言：txt复制
    }
代码语言：txt复制
</script>
代码语言：txt复制
```

03.子组件传值给父组件

  • 父组件的代码如下<!-- 子组件传父组件 --> <!-- 父组件内部写法 --> <template> <view> <!-- 接收到子组件传递的数据 --> <h2>父组件接收到的值:{{valueChild}}</h2> <!-- 在子组件标签上绑定子组件内部对应事件，并触发对应回调 --> <children style="color: #0000FF;" @Transmit="handle"></children> </view> </template>
代码语言：txt复制
<script>
代码语言：txt复制
    //引入子组件
代码语言：txt复制
    import children from "../../pages/ele/element-children2.vue"
代码语言：txt复制
    export default {
代码语言：txt复制
        data() {
代码语言：txt复制
            return {
代码语言：txt复制
				//定义属性接收数据
代码语言：txt复制
                valueChild:"",
代码语言：txt复制
            }
代码语言：txt复制
        },
代码语言：txt复制
        components:{
代码语言：txt复制
			//注册子组件
代码语言：txt复制
            children
代码语言：txt复制
        },
代码语言：txt复制
        methods:{
代码语言：txt复制
            // 子组件内部触发事件对应回调handle
代码语言：txt复制
            handle(val){
代码语言：txt复制
                this.valueChild=val;
代码语言：txt复制
            }
代码语言：txt复制
        }
代码语言：txt复制
    }
代码语言：txt复制
</script>
代码语言：txt复制
```
  • 子组件的代码如下<!-- 子组件传父组件 --> <!-- 子组件内部写法 --> <template> <view> <h2>子组件</h2> <!-- 点击按钮进行事件触发 --> <button @click="handleTransmit">点击给父组件传值</button> </view> </template>
代码语言：txt复制
<script>
代码语言：txt复制
    export default {
代码语言：txt复制
        data() {
代码语言：txt复制
            return {
代码语言：txt复制
                //要传递的数据
代码语言：txt复制
                valueParent: "子组件传递过来的数据"
代码语言：txt复制
            }
代码语言：txt复制
        },
代码语言：txt复制
        methods: {
代码语言：txt复制
            handleTransmit() {
代码语言：txt复制
                // 进行事件触发，传递数据
代码语言：txt复制
                this.$emit("Transmit", this.valueParent)
代码语言：txt复制
            }
代码语言：txt复制
        }
代码语言：txt复制
    }
代码语言：txt复制
</script>
代码语言：txt复制
```
button children click h2 view

0 人点赞