(九)组件化 组件 父组件子组件传参 兄弟组件传参 组件插槽

注意 :每个组件必须只有一个根元素

注意:一般不在子组件对数据(props)进行操作

注意: 组件自定义标签名的命名方式: 


命名格式:

1. 使用全小写加-符号的格式 

之前有因为命名方式报错


vue 调试工具


安装步骤:

1、克隆仓库 git clone

2、安装依赖包 npm install

3、构建 npm run build

4、打开chrome扩展页面

5、选中开发者模式

6、加载已解压的扩展,选择shells/chrome

直接在谷歌应用商店安装



注意: 自定义的组件标签在有些时候使用会受到限制,例如:如果直接在标签中使用标签是无效的,解决方法是使用is属性来挂载组件:



零、父向子孙节点共享


provide

基于provide向下共享响应式的数据:


inject

provide 向外return数据时,不是响应式的。所以用computed函数来响应式的修改数据




一、父组件向子组件传递参数

(1)最基础:   写死的静态方式    

(2)用v-bind绑定数据,数据的动态更新。



(3) 子组件接受数据:  props 

props传递数据原则 单向数据流



必传值


类型是对象、数组



自定义验证方法

二、使用自定义事件从子组件向父组件传递数据

子组件使用$emit()来触发事件

父组件使用$on()来监听子组件的事件

用$event来取到数据子组件传过来的数据。 $event 表示this.nums,严格写如下


点击让字体变大:里面是这样写的。



三 、非父子组件间传值

比如兄弟组件之间的数据传递

(1)单独的事件中心管理组件间的通信

var eventHub = new Vue()    [new一个vue 来作为事件中心 ]

(2)监听事件 与 销毁事件

eventHub.$on('add-todo' , addTodo) 【组件在mounted中监听,addTodo接收传过来的数据】

jeventHub.$off('add-todo') 【事件销毁,监听将无效】

(3)触发事件

eventHub.$emit('add-todo' , id)

e.g. 父组件下面有两个子组件,子组件分别有一个按钮,点击按钮分别给对方的数据加减

(1)父组件 兄弟组件

(2)事件中心

(3)监听事件  触发事件



(四)组件插槽  [父组件向子组件传递内容]

1、


slot中默认内容,1.没有传入 那么显示默认内容; 2.传入 那么覆盖默认的内容

2、具名插槽

对应显示:

临时性的包裹一下内容,不会渲染到页面:[可以一次性填入多条数据]

template

3、作用域插槽

作用:父组件得到子组件的数据,父组件对子组件的内容进行加工处理

e.g.  子组件得到父组件的数据,数据通过v-for遍历出来,要求给数据样式:给一条数据高亮;

一般不会修改子组件,而是在父组件中 处理 给予样式。


4、新增 

[1] 定义动态插槽名

案例:


点击输入框 实时修改 父组件的数据



(五)父子组件的访问方式  ref访问组件

1.父组件访问子组件:$children  (一般不用)    |    $refs     

得到的是一个对象

获取子组件的所有属性

2.子组件访问父组件:$parent (用的很少)

3.访问根组件 $root


可以用组件中的方法

ref 获取dom元素:

ref取名最好以ref结尾

如:ref=" h1Ref "



六、动态组件


只显示渲染的组件


在离开组件之后,组件不回销毁,里面的状态值,会保持

你可能感兴趣的:((九)组件化 组件 父组件子组件传参 兄弟组件传参 组件插槽)