vue 开发过程中遇到问题和解决记录

(Emitted value instead of an instance of Error)

问题

`(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The n
ot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.`

解决办法:
你检查下你的列表组件里,slot 里的 上面有个 scope 属性,你改成 slot-scope

<template scope="xxx">yyyyyyyy</template> 

改成

<template slot-scope="xxx">yyyyyyyy</template> 

Vue提示warn:”[vue-router] Named Route ‘home’ has a default child route…”

[vue-router] Named Route 'home' has a default child route. When navigating to this named route (:to="{name: 'home'"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead. 

解决办法

因为当某个路由有子级路由的时候,这时候父级路由需要一个默认的路由,所以父级路由不能定义name属性,SO解决办法是:即去除父级的name属性即可。

vue webpack [HMR] 警告

Used by 6 module(s), i. e.
D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.6.4.1@babel-loader\lib\index.js!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\node_modules\.11.3.4@vue-loader\lib\selector.js?type=script&index=0!D:\用户目录\我的文档\HBuilderProject\vue-bulingwang\pulingwang\src\page\bbs\index.vue

解决办法:

    当你排查项目目录大小没有问题,而且模块引入也没有问题的时候,就要考虑一种情况,因为window不区分大小写,lunix区分大小写的,如果我的项目放在桌面上,其实正确的写法应该是Desktop,你cd desktop没有问题,但是当你run dev的时候

盘符 e: 和 E: 是有区别的 在cnpm run dev 的时候

# props,scope,slot,ref,is,slot,sync等 1、ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息。refs是一个对象,包含所有的ref组件。
  (子组件)

var parent = new Vue({ el: ‘#parent’ })
// 访问子组件
var child = parent. r e f s . p r o f i l e p s 表示refs为vue对象,而不是普通的js对象。
2、props:父组件向子组件传值(数据),驼峰式改为横线式。
Vue.component(‘child’, {
// 声明 props
props: [‘message’],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: ‘{{ message }}
})
3、scope 作用域
在父级中,具有特殊属性 scope 的 元素必须存在,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象:

hello from parent {{ props.text }}

4、is 用于动态组件并且给予DOM内模板到限制来工作

动态组件:
由于table、ul、ol等标签内无法插入自定义标签,只能插入特定标签,所以使用is属性带入。通过使用保留的 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换:

var vm = new Vue({
el: ‘#example’,
data: {
currentView: ‘home’
},
components: {
home: { /* … */ },
posts: { /* … */ },
archive: { /* … */ }
}
})



 my-row是自定义组件

 
5.slot分发内容
不具名slot用来备用插入,子组件只有不具名的slot时候,父组件才回调用slot内容,如果子组件有其他内容,父组件的内容会替换掉slot内容,slot内容不显示。

我是子组件的标题

只有在没有要分发的内容时才会显示。

父组件模版:

我是父组件的标题

这是一些初始内容

这是更多的初始内容

渲染结果:

我是父组件的标题

我是子组件的标题

这是一些初始内容

这是更多的初始内容

6、sync 字符修饰符
当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定的值。
是一个会被扩展为一个自动更新父组件属性的 v-on 侦听器。

猜你喜欢

转载自blog.csdn.net/yangxiaodong88/article/details/80056729