Vue父子组件传值

来源：互联网发布：如何提高口语知乎编辑：程序博客网时间：2024/05/19 14:01

----父组件向子组件传值-----

1. 父：v-bind:obj="" 子：props=['obj']
2. 父：引入组件上直接加属性name="zy" 子：用thid.$refs通过dom取到属性值zy

----子组件向父组件传值----

1. 子：$emit(事件名)传递信号父：v-on:事件名="自身事件" 监听信号，一旦监听到，立即触发自身事件。或者$on(事件名)监听。

代码：

<!DOCTYPE html><html> <head>    <meta charset="utf-8">    <title>父子组件传值</title>     <script src="js/vue.js" type="text/javascript"></script>     <style type="text/css">    .app{    width:300px;    height: 300px;    border: 1px solid #00ff00;    }    .card{    width:200px;    height: 200px;    border: 1px solid #ff0000;    }    </style></head><body> <div class="app"> <my-card v-bind:obj="colors" name="zy" v-on:listen="goto"></my-card> </div> <script>/*----父组件向子组件传数据-----1. 父：v-bind:obj=""  子：props=['obj']2. 父：引入组件上直接加属性name="zy"，子：用thid.$refs通过dom取到属性值zy----子组件向父组件传数据-----1. 子：$emit(事件名)传递信号 父：v-on:事件名="自身事件" 监听信号，一旦监听到，立即触发自身事件。 或者$on(事件名)监听。 */Vue.component("my-card",{template:'<div class="card" ref="card" v-on:click.stop="toclick">12345678</div>',props:['obj'],data: function(){return {id: "我是子组件card" }},methods:{toclick: function(){console.log("%%%%拿到props数据%%%%");console.log(this.obj[0].color0);console.log("%%%%拿到虚拟dom%%%%");console.log(this.$refs.card);console.log("%%%%拿到非prop传入的name的属性值%%%");console.log(this.$refs.card.getAttribute('name'));//向父组件发送信号this.$emit('listen',this.id);} } })var app = new Vue({el: ".app",data: {colors:[{color0:'#0000ff'},{color1:'#00ff00'}]  },methods:{goto: function(msg){alert("我监听到啦:  " + msg);}}});//这种方法的意义何在// app.$on('test', function(msg){// alert("我监听到啦:  "+msg);// });// app.$emit('test','hello');</script></body></html>

阅读全文

0 0

Vue父子组件传值

----父组件向子组件传值-----

1. 父：v-bind:obj="" 子：props=['obj']2. 父：引入组件上直接加属性name="zy" 子：用thid.$refs通过dom取到属性值zy

----子组件向父组件传值----

1. 父：v-bind:obj="" 子：props=['obj']
2. 父：引入组件上直接加属性name="zy" 子：用thid.$refs通过dom取到属性值zy