父组件向子组件传递参数:
注意:
- 父组件发送的形式是以属性的形式绑定值到子组件身上。
- 然后子组件用属性props接收
- 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式,字符串模板中没有这个限制
- 在需要动态的数据的时候 需要属性绑定的形式设置,静态值不需要绑定形式设置,
- 动态绑定可以保存值的基本数据类型,如果不动态绑定,数据会以字符串形式传递
<!-- 定义根组件 --> <div id="app"> <!-- 在需要动态的数据的时候 需要属性绑定的形式设置,静态值不需要绑定形式传递 --> <a-father :father="father"></a-father> </div> <script> // 定义一个全局的子组件,a-father是new vue的子组件 Vue.component('a-father',{ // 在需要动态的数据的时候 需要属性绑定的形式设置,静态值不需要绑定形式传递 template: '<div>{{father}}<hr/><h2><a-son :fistMsg="fistMsg"></a-son></h2></div>', data: function() { return{ fistMsg:'component第一个全局组件传递过来的值', fathers:'全局子组件' } }, // 接收new Vue传过来的参数, props:['father'], components:{ // a-son是a-father的子组件 'a-son':{ template:'<div>{{fistMsg}}</div>', data:function(){ return{ sonMsg:'a-father子组件' } }, // 接收a-first传递过来的值 props:['fistMsg'] } } }) const vm = new Vue({ el:'#app', data: { msg: 'hello', father:'new vue中的father', title:'titles' } }) </script>