• 组件之间的传值 父传子


    01===>父传子 props:["a","name"]来进行
    在父亲页面可以看见 子组的值是动态的

     

    fu.vue
    <h2>我是父亲</h2>
    <br>
    <!-- 引入子组件 -->
    <child a="test1" name="张三"></child>
    <child a="test2" name="李四"></child>
    
    <script>
    import child from "../zi/zi" //引入子组件
    export default {
        components: {
           child
        },
        data () {
            return {
            }
        }
    }
    </script>
    

     

    zi.vue 子组件:
    <span>{{ a }} {{ name}}</span>
    
    export default {
        //自定义接口 要获取自定义属性 就在数组内 定义自定义属性的名称 接受父组件的值 
        // 所有被props接受到的数据 都会被挂载到this上面去
        props:["a","name"]
    }
    

     

    02===>父传子 props:["a","name"]来进行
    让组件里面的值 是动态的 让data来管理 通过v-bind来实现 :a="val"
    zi.vue不变
    fu.vue如下
    
    <!-- 引入子组件 -->
    <child :a="val" :name="name"></child>
    <child :a="val" :name="name"></child>
    <script>
    import child from "../zi/zi"
    export default {
        components: {
            child
        },
        data () {
            return {
               val:"li123 我是动态的",
               name:"张三"
            }
        }
    }
    </script> 
    03===>父传子
    让组件里面的值 是动态的 data是从数据库里面拿到的
    zi.vue不变
    fu.vue如下
    {
        <div v-for="(item,i) in list" :key="i"> //动态渲染
           <child :a="item.name" :name="item.age"></child> //属性绑定
        </div>
    
        <script>
        import child from "../zi/zi"
        export default {
            components: {
               child
            },
    
            data () {
                return {
                    list:[
                            {name:"zhang1",age:18},
                            {name:"zhang2",age:19},
                            {name:"zhang3",age:20},
                        ]
                }
            }
        }
        </script>
    
    }
  • 相关阅读:
    10、代码块、构造代码块、静态代码块及main方法之间的关系
    2.0、Hibernate框架的简单搭建
    1.0、Struts2的简单搭建方法
    5、Servlet的使用
    angular组件之间的通信
    angular项目中遇到的问题
    ng-zorro-mobile中遇到的问题
    angular管道操作符的使用
    angular路由配置以及使用
    搭建Angular环境
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11300595.html
Copyright © 2020-2023  润新知