Vue.js组件二之prop
2020-06-21 本文已影响0人
爱学习的代代
image.png
一、父组件向子组件传递数据使用prop
prop是子组件接收父组件传递过来信息的的一个自定义属性，因为父组件的数据需要通过props将数据传递给子组件。所以需要显式的声明用props来声明prop
1.用法：
在组件声明中，声明props, 值为子组件间接收父组件传递数据的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- 父组件 调用子组件的就是父组件 -->
<!-- v-model是监听事件，监听输入控件的数据的变化，然后传递给Vue实例 -->
<input v-model="parentMsg">
<br>
<!-- 子组件 -->
<!-- 由于子组件, message的传值与parentMsg的内容保持一致，每当parentMsg发生变化是，会动态改变子组件的内容。 -->
<child v-bind:message='parentMsg'></child>
</div>
</div>
<script>
Vue.component('child', {
props: ['message'],
template: '<h1>{{ message }}</h1>'
})
new Vue({
el: '#app',
data: {
parentMsg: '父组件的内容'
}
})
</script>
</body>
</html>
二、 子组件向父组件传递数据使用自定义事件
-
效果图如下
record.gif
- 说明：点击自组件的时候，子组件的点击次数传递给父组件并且累加后输出
- 用法：
子组件内使用自定义事件 - 代码分析：如果实现上图效果
a. 声明一个组件用于展示总的点击次数
b. 由于下面两个按钮的样式及事件相同，故采用声明组件来实现，且有默认展示0。 即声明定义的时候，同时需要给按钮内数字赋值。
c. 点击按钮A按钮的时候需要对按钮内的数值进行加一，采用v-on:click监听按钮的点击次数实现。
d. 同步更新总的点击次数，也即需要子组件将数值传递给父组件。需要自定义事件$emit。
- 当自定义的时间触发后，子组件使用v-on做监听
- 当监听到事件时，执行后面的操作：即对总的点击次数+1
a.png
b.png
c.png
d.png
下面是完整的代码例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>点击的总次数： {{totolCount}}</p>
<counter v-on:increment_total_one="increment_total"></counter>
<counter v-on:increment_total_one="increment_total"></counter>
</div>
<script>
Vue.component('counter', {
template: '<button v-on:click="increment_one">{{ count }}</button>',
data: function() {
return {
count: 0
}
},
methods: {
increment_one: function() {
this.count += 1
this.$emit('increment_total_one')
}
}
})
new Vue({
el: '#app',
data: {
totolCount: 0
},
methods: {
increment_total: function() {
this.totolCount += 1
}
}
})
</script>
</body>
</html>
三、注意事项
data: function() {
return {
count: 0
}
},
对多个相同组件的赋值，这里的data不是一个对象而是一个函数，
因为对象是引用的模式，而函数式copy的，彼此的数据独立，不会相互影响。
如果更换成了对象会如何？
效果图：
record.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="counter2">
<button-counter2></button-counter2>
<button-counter2></button-counter2>
<button-counter2></button-counter2>
</div>
<script>
var counterCount = {
count: 0
}
Vue.component('button-counter2', {
// data: function() {
// data 选项是一个函数，组件互不影响。
// return {
// count: 0
// }
// },
data: function() {
//data 是一个对象，会影响其他组件
return counterCount
},
template: '<button v-on:click="count++">点击了{{ count }}次</button>'
})
new Vue({
el: '#counter2'
})
</script>
</body>
</html>
