angular1.5 组件学习 -- 2.2、组件间的交互：子向父

有父组件向子组件传递数据，那必然会有子组件向父组件返回数据。这时将使用事件绑定来调用父组件中的方法，告诉父组件：子组件有数据给你，接着。

复制代码
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>子组件向父组件发送数据</title>
    <script src="angular.js"></script>
</head>

<body>
    <father-component></father-component>
    <script>
        angular.module('myApp',[])
            .component('fatherComponent', {
                template: "<h3>father-component {{$ctrl.sayHello}}</h3>" + 
                "<child-component say-some='$ctrl.sayHelloFnc(text)'></child-component>",
                controller: function () {
                    this.sayHelloFnc = function (value) {
                        this.sayHello = value;
                    };
                }
            })
            .component('childComponent', {
                template: "<h3>child-component " + 
                "<button ng-click='$ctrl.sendMessage();'>send message</button></h3>",
                controller: function () {
                    this.sendMessage = function () {
                        this.saySome({text: 'Hello'})
                    }
                },
                bindings: {saySome: "&"}
            })
    </script>
</body>
</html>
复制代码

子向父传递时，绑定父组件的方法，同样是在子组件元素标签上绑定，然后子组件的 bindings 属性绑定相应在子组件中调用父组件的名称即可，这里使用前缀标识符： “&” 。

注意一点，参数传递是以 json 形式传递的，所以子组件使用创建对象将数据保存到一个属性的方式传递数据，并在父组件方法绑定处增加相应属性来解析。

posted @   名字不好起啊  阅读(183)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手