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>
  • 相关阅读:
    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示)
    解决request.getSession().getServletContext().getRealPath("/")为null问题
    redis数据类型为key的常用命令
    spring boot知识清单
    java 百度地图判断两点距离2
    java 百度地图判断两点距离1
    百度地图js判断点是否在圆形区域内
    百度地图java 判断当前位置是否在多边形区域内
    redis学习之路
    burpsuite插件使用
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/12156989.html
Copyright © 2011-2022 走看看