摸鱼日记之 vue脚手架安装和组件之间传值

一 ，项目创建

1下载脚手架(4版本的脚手架)

npm i @vue/cli@4 -g

2创建项目

vue create 项目名

3运行

npm run serve

二，组件传值

1父子组件传值

（1）父组件使用自定义属性，对子组件进行传值。

（2）父组件 在引用的子组件标签里 创建自定义属性 属性值为传递的值

（3）子组件通过props选项进行接收值

2子组件对父组件传值

（1）通过自定义事件进行传值

（2）子组件通过this.$emit('事件名','传递参数')

（3）父组件通过 @事件名='触发函数' 函数的参数就是 子组件传递的参数

3组件之间传递

（1）通过创建事件中心。传递和接收都引入这个事件中心。从而达到传递。

（2）传递者通过事件中心暴露出来的vue实例挂载上自定义事件vm,$emit('事件名字','传递参数')

（3）接受者在生命周期为created（）时监听获取值vm.$on('事件名字',da=>{da就是监听到的参数})

三，插槽

1匿名插槽

应用场景组建中只有一个差异的地方

子组件（公共组件）需要的地方加入<slot></slot>标签即可

父组件（应用公共组件）引入子组件 并且注册在componets（组件嵌套） 在页面中直接使用引入时的别名 作为标签使用。添加公共组建中 不同的元素。

2具名插槽

应用场景 组件中有多个差异的地方

同上类似 只不过slot 标签需要加name属性，属性值为名字

调用时 和上面一样 不同的是 引用的标签里 需要加 template标签 v-slot:加名字 就完成了 绑定

v-slot:还可以简写  直接#加名字

3作用域插槽

应用于 子组件需要给父组件传值的时候

子组件 通过自定义属性传递 :row="数据"

父组件 通过  

v-slot="数据"接收 或者

 

slot-scope="attr"

四ref

在标签中加入 ref=‘xxx’

调用时this.$refs.xxx就获取到dom元素了