Camila Waz 发布于
2018-08-23 16:19:31

angular.js将数据从父级传递给子组件

angular.js将数据从父级传递给子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://unpkg.com/angular@1.7.3/angular.js"></script>
<body ng-app="app">
    <parent-component></parent-component>
<body>
<script type="text/javascript">
var app=angular.module("app",[]);
app.component("parentComponent", {
    template: `
        <fieldset>
            Inside parent component<br>
            parentData={{$ctrl.parentData}}
            <child-component in-data="$ctrl.parentData"></child-component>
        </fieldset>
    `,
    controller: function () {
        this.$onInit = () => {
            this.parentData = '父组件的值'
        };
    },
})
app.component("childComponent",{
    bindings: {
        inData: '<',
    },
    template: `
        <fieldset>Inside child component<br>
            inData={{$ctrl.inData}}
        </fieldset>
    `,
})
</script>
</body>
</html>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-23/203.html
最后生成于 2020-08-31 16:48:51