VUE中父页面(组件)与子组件相互传参： 父页面(组件)给子组件传参： // 在父页面(组件)上自定义属性 在子组件上使用props属性接收 // props属性写成一个数组 数组中是自定义属性名 // props中的值可以和data中的值一样使用
子组件给父页面(组件)传参： // 在子组件中使用 this.$ emit调用在父组件(页面)中自定义的事件 // 自定义事件触发一个方法 方法的参数可以接收到值 // this.$emit(‘事件名’, ‘传参’)
<body> <div id="box"> <!-- //将name传给子页面 --> <!-- <navbar name="hello world "></navbar> --> <!-- hello world 我是一个导航条组件 --> <!-- :obj="numObj " 后面numObj是js中的data数据 :obj obj是一个变量 所以要绑定一个属性用:obj--> <!-- <navbar :obj="numObj "></navbar> --> <!-- 10我是一个导航条组件 --> <!-- 父元素通过自定义函数用一个参数接受子传过来的值 --> <navbar @myevent="getDataFun" :obj="numObj "></navbar> <!-- 10我是一个导航条组件 --> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="components.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:'#box', data:{ numObj:{x:10,y:20} }, methods: { getDataFun(res){ console.log(res);//<!-- 我是子组件的数据 --> } }, components:{ navbar } }); </script> // 子组件componemts.js let navbar ={ template:'<div>{{obj.x}}我是一个导航条组件</div>', // template:'<div>{{name}}我是一个导航条组件</div>', data(){ return{ msg: 'hello', //子给父传的数据 navData: '我是子组件的数据' } }, created(){ // this.$emit调用父组件(页面的)自定义事件 // 第一个参数是事件名 第二参数是传的值 this.$emit('myevent', this.navData); }, //接受父页面传来的值 //obj和父页面绑定属性的名字一致 即:obj的obj props:['name','obj'] }