Milan_KunderLa的博客

这是一个前端小白的成长记录

组件之间的通信之动态属性传递
1.在父组件中,通过import载入子组件
如:import ComA from './components/a'
2.在a.vue中,设置导出模板:
export default{


}


3.在当前父组件中注册子组件:


import ComA from './components/ComA'
import ComB from './components/ComB'
import ComC from './components/ComC'


components:{
ComA :comA,//将引入的ComA赋值给ComA
     ComB,ComC//如果赋值名相同,也可以省略冒号
}


4.在<template>中使用
<com-a></com-a>规则:所有的大写必须全部转成小写,并且以-区分(Vue1.0不识别


大写标签,会报错)


另外,传递的属性也需要该为小写,规则相同
5.通过is引入模板:
<p :is="com-a"></p>
好处:可以在那个位置渲染动态的组件
<p :is="comTorender"></p>
data(){
   return{
comToRender:'com-b'//这里comToRender变为了一个动态的属性
}

}
6.父与子组件进行通信
比如子组件向父组件传递信息:Event:Emit触发或on监听
比如父组件向子组件传递信息:Props:Pass
在父组件中,<p number=8></p>
在子组件中,props:['number'],并且在子组件中可以进行number的渲染
也可以通过this.number获取到从父组件传来的值


注意:属性也是大小写不敏感的,需用-进行区分;
      此时在父组件中number是一个字符串的形式<p number=8></p>
      在子组件中指定类型时,也应该为String,或‘number’:[Number,String]


7.<input type="text" v-model = "myval">
<com-a :my-value = "myVal"></com-a>
//不可以写成<com-a my-value = "myVal"></com-a>
//此时my-value就是一个动态的属性,此处也应该在子组件中进行声明
props:{
'my-value':[Number,String]
}
8.子组件向外传递数据
(1)首先在子组件里面设置一个点击methods
在这个方法中:this.$emit('my-event',this.hello)
表示我们使父组件触发一个事件,名字叫做my-event,并且向这个方法传递一个参数


,即子组件的hello属性
(2)其次在父组件中监听被触发的事件my-event,当这个事件被触发时使其触发父组


件的另一个方法getMyevent(hello)在这个方法中接收一个从子组件传来的参数hello


,在这里就可以打印子组件的属性hello的值
9.父组件向子组件传递一个模板元素:插槽
(1)首先在父组件中
<com-a>
<p slot="header">123</p>//这里插入一个模板
</com-a>
(2)在子组件中加入标签<slot name="header">no slot</slot>
//为插槽设置默认值no slot,设置name方便子组件使用时定位





阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Milan_KunderLa/article/details/79969502
文章标签: vue 前端
个人分类: vue
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

组件之间的通信之动态属性传递

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭