当我们将整个页面都拆分了不同的组件以后，这样就会涉及到组件之间的数据传递问题。
常见的组件的通信可以分为三类：
第一类: 父组件向子组件传递数据
第二类: 子组件向父组件传递数据
第三类：兄弟组件的数据传递。
下面，我们先来看一下父组件向子组件传递数据的情况
第一：子组件内部通过props接收传递过来的值。
Vue.component('menu-item',{ props:['title'] // props后面跟一个数组，数组中的内容为字符串，这个字符串可以当做属性类使用。 template:'
{
{title}}
' })第二: 父组件通过属性将值传递给子组件
下面看一下具体的案例演示：
下面我们在看一个例子，这个例子是前面我们写的关于局部组件的案例，我们在这个案例的基础上实现组件的传值。
局部组件
在上面的代码中，我们首先给hello-msg 这个组件传递了一个属性title,该属性的值是固定的。在对应的HelloMsg组件内容定义props,来接收传递过来的title属性的值。然后在template模板中展示title的值。
接下来，又在vue实例中指定了一个content的属性，下面要将该属性的值传递给HelloMsg组件。
这里需要动态绑定的方式将content的值传递到HelloMsg组件。这里动态绑定的属性为pcontent,所以在HelloMsg组件内部，需要在props的数组中添加一个pcontent,最后在template模板中展示出pcontent的内容。
// 定义HelloMsg组件 const HelloMsg = { props: ["title", "pcontent"], data() { return { msg: "Hello World", }; }, template: `
{
{msg+'----------'+title+'-----------'+pcontent}}
`, };通过上面的案例，我们可以看到，在子组件中可以使用props来接收父组件中传递过来的数据。
但是，props在进行命名的时候，也是有一定的规则的。
如果在props中使用驼峰形式，模板中需要短横线的形式，如下代码案例所示：
Vue.component('menu-item',{ //在JavaScript中是驼峰形式 props:['menuTitle'], template:'
{
{menuTitle}}
' })
下面看一下具体的代码演示：
组件传值
下面再来看一下props属性值的类型。
props 可以接收各种类型的值。
如下：
字符串（String）
数值(Number)
布尔值(Boolean)
数组(Array)
对象(Object)
下面，将上面的类型都演示一下：
props类型
在上面的代码中，向menu-item组件中传递了各种类型的数据。
注意：
在上面的代码中，:num="10"表示传递的是数字，如果写成num="10" 表示传递的是字符，
同理b="true"传递的是字符，如果修改成:b=true表示传递的是布尔类型。
最后还传递了数组类型与对象类型的内容。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/214921.html原文链接：https://javaforall.net
