zoukankan      html  css  js  c++  java
  • uniapp中组件传值

    1、父组件传子组件

    父组件内部写法:

    <template>
        <view>
            <h2>首页</h2>
            <!-- 绑定自定义属性传递数据 -->
            <Two :value="valPar"></Two>
        </view>
    </template>
    
    <script>
        //引入子组件
        import Two from "../../components/two/two.vue"
        export default {
            data() {
                return {
                    valPar:"父组件传递过来的值"
                }
            },
            components:{
                Two//注册子组件
            },
            methods: {
        
            }
        }
    </script>

    子组件内部写法:

    <template>
        <h2>two组件收到:{{value}}</h2>
    </template>
    
    <script>
        export default {
            props:{
                value:{
                    type:String,
                    default:"默认值"
                }
            },
            data() {
                return {
                    
                }
            },
            created(){
                
            }
        }
    </script>

    2、子组件传父组件 -- 写法1

    父组件内部写法:

    <template>
        <view>
            <!-- 接收到子组件传递的数据 -->
            <h2>接收到的值:{{valueChild}}</h2>
            <!-- 在子组件标签上绑定子组件内部对应事件,并触发对应回调 -->
            <One @Transmit="handle"></One>
        </view>
    </template>
    
    <script>
        //引入子组件
        import One from "../../component/one.vue"
        export default {
            data() {
                return {
                    valueChild:"",//定义属性接收数据
                }
            },
            components:{
                One//注册子组件
            },
            onLoad(){
                
            },
            methods:{
                // 子组件内部触发事件对应回调handle
                handle(val){
                    this.valueChild=val;
                }
            }
        }

    子组件内部写法:

    <template>
        <view>
            <h2>one组件</h2>
            <!-- 点击按钮进行事件触发 -->
            <button @click="handleTransmit">点击给父组件传值</button>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    //要传递的数据
                    valueParent: "子组件传递过来的数据"
                }
            },
            methods: {
                handleTransmit() {
                    // 进行事件触发,传递数据
                    this.$emit("Transmit", this.valueParent)
                }
            }
        }
    </script>
    </script>

    子组件传父组件 -- 写法2

    父组件内部写法:

    <template>
        <view>
            <!-- 接收到子组件传递的数据 -->
            <h2>接收到的值:{{valueChild}}</h2>
            <Two></Two>
        </view>
    </template>
    
    <script>
        //引入子组件
        import Two from "../../components/two/two.vue"
        export default {
            data() {
                return {
                    valueChild:"",//定义属性接收数据
                }
            },
            components:{
                Two//注册子组件
            },
            onLoad(){
                // 进行事件绑定,val为子组件传递的数据
                uni.$on("Transmit",(val)=>{
                    this.valueChild=val;
                })
            }
        }
    </script>

    子组件内部写法:

    <template>
        <view>
            <h2>two组件</h2>
            <!-- 点击按钮进行事件触发 -->
            <button @click="handleTransmit">点击给父组件传值</button>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    //要传递的数据
                    valueParent: "子组件传递过来的数据"
                }
            },
            methods: {
                handleTransmit() {
                    // 进行事件触发,传递数据
                    uni.$emit("Transmit", this.valueParent)
                }
            }
        }
    </script>
  • 相关阅读:
    [Android 4.4.4] 泛泰A850 三版通刷 Mokee4.4.4 KTU84P 20140626 RC2.2 by syhost
    YUV12(420) (from)to RGB24
    Python图像处理(16):图像金字塔
    内存管理笔记(分页,分段,逻辑地址,物理地址)【转】
    Linux内核分析--内核中的数据结构双向链表【转】
    标准IO与文件IO 的区别【转】
    Linux中设备号及设备文件【转】
    静态编译和动态编译的区别【转】
    嵌入式系统 Boot Loader 技术内幕【转】
    理解 Linux 的硬链接与软链接【转】
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/12156989.html
Copyright © 2011-2022 走看看