vue组件传值的方法：

1、父向子传值使用`props`：

父组件通过属性给子组件传值: 子组件的props接受数据

1.子组件接收的父组件的值分为引用类型和普通类型两种：

普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）

引用类型：数组（Array）、对象（Object）

 //如果根组件传入的值与指定传入的类型不符合，代码依旧会运行，但是控制台会发出警告，告诉我们代码执行可能会报错
 //比如：根组件传入给子组件的值的类型是数字，但是，我在子组件的属性的类型设置为字符串，因为我在标签内使用了字符串的方法，但是，传入的值是数字类型，所以就会报错。


 props: { myName: String } //这样指定传入的类型，如果类型不对会警告

props: { myName: [String, Number] } // 多个可能的类型

 props: { myName: { type: String, requires: true } } //必填的的字符串

props: {

 childMsg: {

     type: Array,

    default: () => []

   }

 }  // default指定默认值

如果 props 验证失败，会在控制台发出一个警告。

对属性做详细的描述:

    props: {
  propA: Number,		// 基础的类型检查 (`null` 匹配任何类型)
  propB: [String, Number],	// 多个可能的类型
  propC: {	type: String,
 		 required: true	// 必填的字符串
},
  propD: {	type: Number,
  		default: 100	// 带有默认值的数字
	 },
  propE: {	type: Object,	// 带有默认值的对象或者数组填Array
	default: function () {	// 不建议直接填对象(因为对象直接量会一直占用内存),一般使用工厂函数,调用时才创建对象节省资源(面试)
    		return { message: 'hello' }
  		}
	},
   propF: {
  		validator: function (value) {// 自定义验证函数返回为true就代表数据符合我们规定
		return ['success', 'warning', 'danger'].indexOf(value) !== -1
  		}
	}
 }

代码运行结果图：

2.对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变

注：如果不使用 watch 来监听父组件传递的 myName 值，子组件中的 name 值是不会随着父组件的 myName 值进行改变，因为 data 中 name: this.myName 仅仅只是定义了一个初始值。
如果引用类型的值，当在子组件中修改后，父组件的也会修改，因其数据是公用的，其他同样引用了该值的子组件也会跟着被修改。可以理解成父组件传递给子组件的值，就相当于复制了一个副本，这个副本的指针还是指向父组件中的那个，即共享同一个引用。所以除非有特殊需要，否则不要轻易修改。

3.注意点：

基于 vue 的单向数据流，即组件之间的数据是单向流通的，子组件是不允许直接对父组件传来的值进行修改的，所以应该避免这种直接修改父组件传过来的值的操作，否则控制台会报错。

如果传过来的值是简单数据类型，是可以在子组件中修改，也不会影响其他兄弟组件内同样调用了来自该父组件的值。

具体操作是可以先把传过来的值重新赋值给data中的一个变量，然后再更改那个变量。

这是点击后的结果图：

Vue——组件3：组件属性、组件传值1：父向子传值（属性传值：单向数据流）