自己做的vue的项目,打算开源发布出去。里面会不断的有新的文章,帮助大家走过各种坑,当然该项目还没完成,我个人也会尽快做。我会借着每次发布新文章时都推广一下。如果看到的,或是有兴趣的人可以给个star。真的非常感谢啦。
地址:
VUE项目
重点: 觉得还可地,顺便给颗星,谢谢
一、组件传值
1、父组件给子组件传值
1.0 应用场景:父组件内有搜索功能,子组件是搜索之后的列表。需要将列表内的关键之加红色,但是关键之的值在父组件捏。
1.1 命名约定:对于props声明的属性来说,在父级HTML模板中,属性名需要使用中划线写法(如下的childMessage 变为child-message)
1.2 props 是单向绑定的:
当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解另外,每次父组件更新时,子组件的所有 prop都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了,Vue 会在控制台给出警告
1.3 注意确保在初始化根实例之前注册组件。
1.4 如果用vue-cli父组件通过import引用子组件,在子组件内用props即可。
1.5 传值数据类型:
普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)
普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值
引用类型:数组(Array)、对象(Object)
引用类型的值,当在子组件中修改后,父组件的也会修改,其他同样引用了改值的子组件内部的值也会跟着被修改。
vue-cli 写法:
父组件:
<template>
<div>父:
<child :child-msg="parentMsg"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
data () {
return {
parentMsg: 0
}
},
components: {
child
}
}
</script>
子组件child.vue
export default {
props: {
childMsg: Number // 验证为数值,需要props是对象写法
},
data () {
return {
}
},
mounted () {
console.log(this.childMsg)
}
}
引入vue.js写法一
<div id="app">
<parent></parent>
</div>
// 父组件
Vue.component('parent', {
data () {
return {
parentMsg: '3333'
}
},
// 双向绑定input,动态的将父组件的数据传递给子组件
template: `<div>父:
<input v-model="parentMsg">
<child :child-message="parentMsg"></child>
<div>{{parentMsg}}</div>
</div>`
});
// 子组件
Vue.component('child', {
props: ['childMessage'],
template: '<div><div>{{ childMessage }}</div> 子:<input v-model="childMessage"></div>'
})
// 初始化实例
new Vue({
el: '#app'
})
引入vue.js写法二
<div id="app">
<parent></parent>
</div>
// 子组件
var child = {
props: ['childMessage'],
template: '<div><div>{{ childMessage }}</div> 子:<input v-model="childMessage"></div>'
}
// 父组件
var parent = {
data () {
return {
parentMsg: '33ssss33'
}
},
template: `<div>父:
<input v-model="parentMsg">
<child :child-message="parentMsg"></child>
<div>{{parentMsg}}</div>
</div>`,
components: {
'child': child
}
};
// 创建根实例
new Vue({
el: '#app',
components: {
'parent': parent
}
})
2、子组件给父组件传值
利用:vm.$emit( event, […args] ) :触发当前实例上的事件。附加参数都会传给监听器回调。
父组件:
<template>
<div id="app">
<pages @sendDataToParent="showChildData"></pages>
</div>
</template>
<script>
import pages from './page/page1.vue'
export default {
name: 'App',
data () {
return {
parentMsg: 0
}
},
components: {
pages
},
methods: {
showChildData (arg) {
// 通过argments访问子组件穿过来的值
console.log(arg)
}
}
}
</script>
子组件:
<template>
<div>
<div @click="sendDataToParent()">3333</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
sendDataToParent () {
// emit的第二个参数会传给回调
this.$emit('sendDataToParent', {a: 1})
}
}
}
</script>
3、兄弟组件传值(传给父组件,再由父传给子,上面两种结合起来用)
数据流向: page1.vue —— parent.vue —— page2.vue
父组件:
<template>
<div id="app">
<pages ref="child" @sendDataToParent="showChildData" :child-msg="parentMsg"></pages>
<pages2 ref="child" :child-msg-from-child="comeChild1"></pages2>
</div>
</template>
<script>
import pages from './page/page1.vue'
import pages2 from './page/page2.vue'
export default {
data () {
return {
parentMsg: '点击page1将数据传递给page2,该段文字又是通过父组件传递给子组件page1的。',
comeChild1: {}
}
},
components: {
pages,
pages2
},
methods: {
showChildData (arg) {
this.comeChild1 = arg
}
}
}
</script>
子组件page1:
<template>
<div>
<div>page1</div>
<div @click="sendDataToParent()">page1数据:{{childMsg}}</div>
</div>
</template>
<script>
export default {
props: {
// 验证父组件穿过来的内容 即:(点击page1将数据传递给page2,该段文字又是通过父组件传递给子组件page1的。)
childMsg: String
},
data () {
return {
}
},
methods: {
sendDataToParent () {
// emit的参数会传给回调,传递到父组件
this.$emit('sendDataToParent', {a: 1})
}
}
}
</script>
子组件page2:
<template>
<div>
<div>page2</div>
<div>page2数据:{{childMsgFromChild}}</div>
</div>
</template>
<script>
export default {
props: {
// 接受子组件1传递给父组件,然后在传递到这里的数据 即: ({a: 1})
childMsgFromChild: Object
},
data () {
return {
}
},
methods: {
}
}
</script>
二、验证:
验证:
1、props不能是数组或字符串。
2、可以是原生类型String、Number、Boolean、Function、Object、Array、Symbol或自定义。使用 instanceof 检测。
<div id="app">
<parent></parent>
</div>
var child = {
props: {
'childMessage': String
},
template: `<div>
<div>{{ childMessage }}</div>
子:<input v-model="childMessage">
</div>`
}
var parent = {
data () {
return {
// 如果该处不是字符串,会提示错误。
parentMsg: 'rf'
}
},
template: `<div>父:
<input v-model="parentMsg">
<child :child-message="parentMsg"></child>
<div>{{parentMsg}}</div>
</div>`,
components: {
'child': child
}
};
// 创建根实例
new Vue({
el: '#app',
components: {
'parent': parent
}
})
三、修改props
修改prop中的数据,通常有以下两种原因
1、prop 作为初始值传入后,子组件想把它当作局部数据来用
2、prop 作为初始值传入,由子组件处理成其它数据输出
**注意:**JS中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态
下面示例中,除初始值外,父组件的值无法更新到子组件中
<div id="app">
<parent></parent>
</div>
var child = {
props: [
'childMessage'
],
data () {
return {
childSelf: this.childMessage
}
},
template: `<div>
子:<input v-model="childSelf">
<div>{{ childSelf }}</div>
</div>`
}
var parent = {
data () {
return {
parentMsg: 'rf'
}
},
template: `<div>父:
<input v-model="parentMsg">
<div>{{parentMsg}}</div>
<child :child-message="parentMsg"></child>
</div>`,
components: {
'child': child
}
};
// 创建根实例
new Vue({
el: '#app',
components: {
'parent': parent
}
})
四、父子组件错误用法
错误1:
<div id="app">
<parent>
<child></child>
<child></child>
</parent>
</div>
错误2:
<div id="app">
<parent></parent>
<child></child>
</div>