Vue组件传送门
也可以在Vue的组件内定义组件,此关系是父子组件的关系
如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,则他们之间的关系为
Vue实例 -- 根组件 root
component-a 相对于root 这是子组件,相对于component-b这是 父组件
component-b -- 子组件
目录结构
只能在父组件中调用子组件,但父组件的值不能为直接传递子组件
! doctypehtmlhtmlheadmetacharset=' utf-8 ' title阳光铅笔/title /head body div id='阳光铅笔id'father-component/father-comp onnent bodytemplateid=' father-template ' div h1 father component/h1my data : span { { name }/span HR/child ching templatetemplateid=' child-template ' div H2 child component/H2 father data : span { { name } }/span/div/template script script type=' text/JavaScript ' newvue ({ data : },components 3360 (father-component ) : ) data )返回template: ) # father-templaatant components 3360 { ' child-component ' : { template 360 ' # child-template ' } } /script/html阳光铅笔_fatherAndChild.html
实现过程
在body中通过在div中调用父组件father-component来调用子组件child-component
body div id='阳光铅笔id ' father-component/father-component/div/body
父组件的data ) )在父组件和子组件中分别调用域值的父子构建
template id=' father-template ' div h1 father component/h1my data : span { { name } }/span HR/child-component/child templatetemplateid=' child-template ' div H2 child component/H2 father data : span { { name } }/span/div/template
Vue子组件嵌套在父组件中,并为父组件的name属性指定“太阳铅笔”
组件3360 (father-component ) : )数据) (return ) name: )日光铅笔(},template: ) # father-templaaatant cont
转载于:https://www.cn blogs.com/1138720556阳光铅笔/p/10480853.html