当我们将整个页面都拆分了不同的组件以后,这样就会涉及到组件之间的数据传递问题。
常见的组件的通信可以分为三类:
第一类: 父组件向子组件传递数据
第二类: 子组件向父组件传递数据
第三类:兄弟组件的数据传递。
下面,我们先来看一下父组件向子组件传递数据的情况
第一:子组件内部通过props
接收传递过来的值。
Vue.component('menu-item',{
props:['title'] // props后面跟一个数组,数组中的内容为字符串,这个字符串可以当做属性类使用。
template:'<div>{
{title}}</div>'
})
第二: 父组件通过属性将值传递给子组件
<menu-item title="向子组件传递数据"> </menu-item>
<menu-item :title="title"></menu-item> <!--可以使用动态绑定的方式来传值-->
下面看一下具体的案例演示:
<body>
<div id="app">
<father></father>
</div>
<script>
// 创建一个父组件
Vue.component('father', {
// 2、在使用子组件的地方,通过v-bind指令来给子组件中的props赋值。
template: '<div><p>我是父组件</p><son :myName="mySonName"></son></div>',
data() {
return {
mySonName: '小强'
}
},
components: {
// 创建一个子组件
// 1.声明props,它的作用是:用来接收父组件传递过来的数据。
// props可以跟一个数组,数组里面的内容可以是字符串,这个字符串可以当属性来使用。
son: {
props: ['myName'],
template: '<p>我是子组件,我的名字叫{
{myName}}</p>'
}
}
})
var vm = new new Vue({
el: '#app',
data: {
}
})
</script>
</body>
下面我们在看一个例子,这个例子是前面我们写的关于局部组件的案例,我们在这个案例的基础上实现组件的传值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>局部组件</title>