1500字范文 > vue学习之组件传值自定义事件

vue学习之组件传值自定义事件

时间：2020-01-10 14:33:36

相关推荐

vue学习之组件传值自定义事件

1、静态传值

注意：在template中不要加样式，因为不会起到任何作用他是不会执行的

效果图：

2、动态传值

要保证父组件里面的变量名=props里面的值=templ中的插值{{}}

效果图：

3、子组件里面的props值

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="/npm/vue@2.7.10/dist/vue.js"></script><style>.fa {width: 600px;height: 600px;background-color: PINK;padding: 20px;}.son {width: 300px;height: 200px;background-color: green;border: 1px solid red;}</style></head><body><div id="root" class="fa"><com-son :msg="msg" :heihei="heihei"></com-son></div><template id="myson"><div class="son"><h1>我是子组件</h1><h1>{{msg}}</h1><button @click="change">改变props</button><h1>{{heihei}}</h1><h1>{{xixi}}</h1><h1 v-for="item in haha">{{item}}</h1></div></template><script>// 创建子组件let ComSon = {template: "#myson",// 4 数组方式props: ["msg", "heihei"],data() {return {haha: [],}},methods: {change() {console.log(this.msg);this.msg = '压根改不了'}},computed: {xixi() {for (let i of this.heihei) {let a = i * 10this.haha.push(a)}return this.haha}},}Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示// 父亲页面const vm = new Vue({el: '#root',data() {return {msg: '哈哈我又回来了',heihei: [3, 4, 5, 6],}},methods: {},// 注册成一个局部组件components: {ComSon}});</script></body></html>

效果图：

4、props-验证对象

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="/npm/vue@2.7.10/dist/vue.js"></script><style>.fa {width: 600px;height: 600px;background-color: PINK;padding: 20px;}.son {width: 300px;height: 200px;background-color: green;border: 1px solid red;}</style></head><body><div id="root" class="fa"><com-son :msg="msg" :haha="haha" :tuanzi="tuanzi" :heihei="heihei"></com-son></div><template id="myson"><div class="son"><h1>我是子组件</h1><h1>{{msg}}</h1><h1>{{haha}}</h1><h1>{{heihei}}</h1><h1>{{tuanzi}}</h1></div></template><script>// 创建子组件let ComSon = {template: "#myson",// props: ["msg", 'haha'],// 对象props: {msg: {// 判断类型-type// type: Boolean,typeof: String},haha: {type: String,// 默认值default,没有传值过来时default: '我是备胎'},heihei: {type: String,// 是不是必传，false是不必须required: true},tuanzi: {// 自定义验证函数validator: function (value) {console.log(value);return ['success', 'warning', 'danger', 'haha'].includes(value)}}},}Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示// 父亲页面const vm = new Vue({el: '#root',data() {return {msg: '哈哈我又回来了',// haha: '我不怕',haha: '我是正主',heihei: '我是必须要传的',tuanzi: 'haha'}},methods: {},// 注册成一个局部组件components: {ComSon}});</script></body></html>

二、自定义事件

1、子组件传父组件

向父组件发送事件有三种形式：
1、静态数据 $emit('事件名‘，’数据’）
2、动态数据 $emit('事件名',动态数据）
3、传递多个参数时，父组件可以使用不定参的形式接收

注意：子组件里面定义的事件名要同写在父组件里面的事件名称保持一致，在父组件上通过其他事件去接收子组件传来的数据。

源代码：

<body><div id="root"><com-son @recep="change"></com-son>{{ha}}{{fa}}</div><template id="son"><div class="son"><h1>我是子组件</h1><button @click="send">子组件传父</button></div></template><script>let ComSon = {template: '#son',data() {return {msg: '那都不是事',}},methods: {send() {console.log('向父组件发送事件');// 发送静态数据// this.$emit('recep', '我是子组件里面传过来的哟！！！')// 发送动态数据// this.$emit('recep', this.msg)// 传多参this.$emit('recep', '我是子组件里面传过来的哟！！！', this.msg, '嘎嘎嘎嘎')}}}Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data() {return {ha: '',fa: '我是父组件的值'}},methods: {change(...e) {console.log(e);// console.log(b);this.ha = e[0]this.fa = e[2]}},components: {ComSon}});</script></body>

效果图：

2、ref和refs

<div id="root"><p ref="mp">这是p元素</p><p id="hap">这是另一个p元素</p><button @click="change">获取ref</button></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data() {return {}},methods: {change() {let ha = this.$refs.mpconsole.log(ha);ha.style.border = '5px solid red'let b = document.getElementById('hap')console.log(b);}}});</script></body>

效果图：