vue实现非路由跳转以及数据传递

定义一个父组件

/_ ============ * Home Index Page * ============ * * The home index page.
_/

import VLayout from ‘@/layouts/Default’;
import VCard from
‘@/components/Card’;
import MyButton from
‘@/components/MyButton’;

export default {
/__ * The name of the page.
/
name:
‘home-index’,
data() {
return {
show:
true,
showDate:
“父子间传过来的数据”
}
},
methods: {
toggle1(){
this.show =false;
},
toggle(data) {
console.log(data)
this.show = data;
}
},
mounted() {
// this.toggle();
},
/
_ * The components that the page can use.
_/
components: {
VLayout,
VCard,
MyButton
},
};

再定义一个子组件

export default { props: \["showDate"\], methods: { toggle1() { this.$emit('toggleEvent', "false") } }

}

将父组件的数据通过 porps 传递到子组件,子组件通过 this.$emit(‘触发的事件函数’,要传输的数据)

就目前来说(组件之间传递数据共有三种方法):

1.通过父子组件之间的通信

2.通过 vuex

3.通过路由传参

要说的就这么多,晚安~


文章作者: xkloveme
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 xkloveme !
评论
 上一篇
js中字符串的替换 js中字符串的替换
定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 语法 stringObject.replace(regexp/substr,replacement)参数 描述regexp/su
2017-09-19
下一篇 
vue中过滤器比较两个数组取相同值 vue中过滤器比较两个数组取相同值
在 vue 中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同 ID 的不同 name 值 有两种写法,两个 for 循环和 map 写法 const toName = (ids, arr) => {le
2017-09-14
  目录