vue.js之父子组件的通信

父子组件的通信，传值通过组件的props属性，Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。

父传子:

1:props使用数组，里面存变量

  <div id="app">
  	//变量绑定到子组件的标签上，v-bind:pros数组里的变量名="传的参数的变量名"
    <cpn :cmovies="movieList" :cmsg="msg"></cpn>
  </div>
  <template id="child_cpn">
    <div>
      <ul>
        <li v-for="item in cmovies">{{item}}</li>
      </ul>
      <h4>{{cmsg}}</h4>
    </div>
  </template>
  <script>
    const cpn = {
    	template: '#child_cpn',
      // 组件的props属性
      props: ['cmovies','cmsg'],
      data() {
    		return {}
      }
    }

  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '欢迎使用Vue.js',
  			movieList: [
  				'阿甘正传',
  				'英伦对决',
  				'钢铁侠'
  			],
  		},
      components: {
	      cpn
      }
  	})

props数组里面可以定义多种数据类型：props: [String,Number]

*2:props使用对象，定义一些属性

  <div id="app">
    <cpn :cmovies="movieList" :cmsg="msg"></cpn>
  </div>
  <template id="child_cpn">
    <div>
      <ul>
        <li v-for="item in cmovies">{{item}}</li>
      </ul>
      <h4>{{cmsg}}</h4>
    </div>
  </template>
  <script>
    // 1：父传子：props
    const cpn = {
    	template: '#child_cpn',
	    props: {
		    // 1.数据类型的限制
		    // cmovies: Array,
		    // cmsg: String,

		    // 2.提供一些默认值，以及是否必传值的属性
		    cmsg: {
			    //限制数据类型,字符串、数字等
			    type: String,
			    //默认值
			    default: 'abcsd',
			    // 是否必传
			    required: true
		    },
		    // 类型是对象或数组时，默认值必须是一个函数
		    cmovies: {
			    //限制数据类型，数组default函数返回数组，对象default返回对象
			    type: Array,
			    //默认值
			    // default: [],
			    default() {
				    return []
			    },
			    // 是否必传
			    required: true
		    }
	    },
      data() {
    		return {}
      }
    }

  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '欢迎使用Vue.js',
  			movieList: [
  				'阿甘正传',
  				'英伦对决',
  				'钢铁侠'
  			],
  		},
      components: {
	      cpn
      }
  	})
  </script>