代码:
现在页面上应该只展示123。
接下来我们来创建一个全局组件,全局组件怎么创建,大家还记得吗?
我们这一块就用一个全局组件,app.component,我们创建一个叫做test这样的组件,里面我们给一个template,然后让ta等一个div test。
我这个组件是全局的,那么在我的应用下就可以用组件,怎么用?
直接通过标签的形式来用 是不是就可以了?你用test组件:
现在有一个父子关系的两个组件:
有的时候我子组件下展示的内容并不想把它写死,比如说现在这个test它的内容是死的,只能展示test。那么我希望它展示的内容,你通过在调用它的时候可以自定义,我们可以怎么去写?
我们可以这么去写,比如说我们叫做content等于 hello world:
我们把这个数据通过属性的形式传递给了test组件,那么这个组件如果想用这个content该怎么去用它?
在这里写一个props:
也就是说外部传递过来的属性参数,我通过props来把它接收过来,我通过 props接收content 外部传过来的属性,接收了属性之后,我就可以在这里【第21行】去使用它了,怎么用它?
是不是用两个花括号{
{content}}
一个插值表达式的形式来去用content就可以了,
我们可以看到当我们这么去写代码的时候,子组件展示的内容不是固定的,而是父组件这里调用子组件的时候给它传递的一个动态的内容:
这样的话大家就先了解了父子组件传递这样的一个知识点,父组件调用子组件的标签,
然后通过标签上的属性向子组件传