vue中传值的方式,vue传递参数的几种方法
这篇文章主要介绍了某视频剪辑软件的七种传值方式，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1，父传子
子组件中定义小道具字段，类型为数组（如果需要限制字段值类型，也可以定义为对象的形式)。如下图的例子，父组件挂载子组件HelloWorld，在组件标签上给标题赋值，子组件编译定义道具，里面有一个值是标题，这样子组件就可以使用父组件的值了。
父组件
模板
差异
HelloWorld :title=msg /
/div
/模板
脚本
从导入你好，世界./components/hello world。vue ；
导出默认值{
姓名：家，
data() {
返回{
消息： 搜索音乐，
};
},
组件：{
HelloWorld，
},
};
/脚本
子组件
模板
你好
h1{{ title }}/h1
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
道具：[title]，
data() {
return { }；
},
};
/脚本
2，子传父
子传父，需要在子组件中触发一个事件，在事件中，调用$emit(父组件的方法名, 传递的值),然后在父组件中，通过自定义事件接收传递过来的值。
子组件
模板
你好
h1 @click=添加“{ title }}/h1
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
道具：[title]，
data() {
返回{
年龄：18岁
};
},
方法：{
add(){
这个. emit(childEvent ，这个。年龄)；
}
},
};
/脚本
父组件
模板
差异
hello world @ child event= parent event :title= msg /
/div
/模板
脚本
从导入你好，世界./components/hello world。vue ；
导出默认值{
姓名：家，
data() {
返回{
消息： 搜索音乐，
};
},
方法：{
parentEvent(e) {
控制台。日志(e)；
},
},
组件：{
HelloWorld，
},
};
/脚本
3，兄弟组件传值
1,先新建一个bus.js文件，在bus.js里新的一个某视频剪辑软件实例，充当传输数据的中间层。
从“Vue”导入Vue
导出默认的新某视频剪辑软件
2,在组件A中引入bus.js，通过公交车$emit(事件名,参数)传递参数
模板
你好
h1 @click=添加“{ title }}/h1
/div
/模板
脚本
导入总线自./public fn/bus。js’；
导出默认值{
名称：“HelloWorld”，
道具：[title]，
data() {
返回{
年龄：18岁
};
},
方法：{
add(){
公交车. emit(childEvent ，这个。年龄)；
}
},
};
/脚本
3,在B组件安装好的周期中使用$on(事件名，function(){})接收
模板
div id=swiper
按钮我是按钮/按钮
/div
/模板
脚本
导入总线自./public fn/bus。js’；
导出默认值{
名称： Swiper ，
data (){
返回{
}
},
已安装(){
公交车在( childEvent ，(e)={
console.log(e)
})
}
}
/脚本
4，父组件使用子组件的数据和方法
1,在子组件标签上写上裁判员属性
2,父组件通过这个refs.id .方法名或者这个refs.id .属性名的方式可以访问子组件。
父组件
模板
差异
hello world:title= msg ref= hello /
button @click=parentEvent 我是父亲/按钮
/div
/模板
脚本
从导入你好，世界./components/hello world。vue ；
导出默认值{
姓名：家，
data() {
返回{
消息： 搜索音乐，
};
},
方法：{
parentEvent() {
这个参考文献。你好。add()；
console.log(这个参考文献。你好。年龄)；
},
},
组件：{
编译
},
};
/脚本
子组件
模板
你好
h1{{ title }}/h1
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
道具：[title]，
data() {
返回{
年龄：18岁
};
},
方法：{
add(){
console.log(我是子组件);
}
},
};
/脚本
5，子组件使用父组件的数据和方法
在子组件中，可以使用$parent访问其上级父组件的数据和方法，如果是多重嵌套，也可以使用多层$parent。
父组件
模板
差异
hello world:title= msg ref= hello /
/div
/模板
脚本
从导入你好，世界./components/hello world。vue ；
导出默认值{
姓名：家，
data() {
返回{
消息： 搜索音乐，
};
},
方法：{
parentEvent() {
console.log(我是父组件的方法);
},
},
组件：{
编译
},
};
/脚本
子组件
模板
你好
h1 @click=添加“{ title }}/h1
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
道具：[title]，
data() {
返回{
年龄：18岁
};
},
方法：{
add(){
console.log(这个. parent.msg)
这个$家长。父事件()；
}
},
};
/脚本
6，Vuex传值
状态管理是一个专为vue。j应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。一般小项目不需要用到。
6.1,定义商店
从“Vue”导入Vue
从" Vuex "导入Vuex
vue。使用(Vuex)；
导出默认的新Vuex .商店({
状态：{
学校： 清华大学，
答："不错"
},
getters: {
returnVal(状态){
返回状态。学校状态。a；
},
},
突变：{
changeSchool(state，val) {
州立学校=val
console.log(修改成功);
},
},
动作：{},
模块：{}
});
6.2,挂载
从“Vue”导入Vue
从导入应用程序. 1/app。vue ；
从导入路由器./路由器；
从导入存储./store ；
从"元素-用户界面"导入ElementUI
导入“元素-ui/lib/主题-粉笔/索引。CSS”；
从导入公共Fn ./public fn/public fn ；
Vue.config.productionTip=false
const URL=进程。环境。vue _ APP _ URL
Vue.prototype. $ url=url
vue。原型。$ public fn=public fn
vue。使用(元素ui)；
新Vue({
路由器，
店，
render: h=h(App)，
}).$ mount("# app ")
6.3,使用
模板
你好
h1 @click=添加“{ title }}/h1
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
道具：[title]，
data() {
返回{
年龄：18岁
};
},
方法：{
add(){
console.log(这个100美元商店。状态。学校)；//获取值
//这个store.commit(changeSchool ，北京大学);//修改值
//console.log(这个. store.getters.returnVal)//获取过滤后的值
}
},
};
/脚本
7，路由传值
7.1 通过询问传值
注意：该方式刷新页面参数不丢失，并且会在地址栏后将参数显露，http://localhost:9000/#/conter？id=10086name名称名称=鹏多多
页面A
模板
差异
hello world:title= msg ref= hello /
button @click=parentEvent 跳转/按钮
/div
/模板
脚本
从导入你好，世界./components/hello world。vue ；
导出默认值{
姓名：家，
data() {
返回{
消息： 搜索音乐，
};
},
方法：{
parentEvent() {
这个. router.push({
路径："/conter "，
姓名： conter ，
查询：{
id:10086，
名称：鹏多多
}
})
},
},
组件：{
编译
},
};
/脚本
页面B
模板
div id=conter
/div
/模板
脚本
导出默认值{
姓名： conter ，
data (){
返回{
}
},
已创建(){
console.log(这个. route.query.id，这个$路线。查询。姓名)；
},
}
/脚本
7.2 通过参数传值
注意：该方式刷新页面参数会丢失，可以接收后存在会话存储。
A页面
模板
差异
hello world:title= msg ref= hello /
button @click=parentEvent 跳转/按钮
/div
/模板
脚本
从导入你好，世界./components/hello world。vue ；
导出默认值{
姓名：家，
data() {
返回{
消息： 搜索音乐，
};
},
方法：{
parentEvent() {
这个. router.push({
路径："/conter "，
姓名： conter ，
参数：{
id:10086，
名称：鹏多多
}
})
},
},
组件：{
编译
},
};
/脚本
B页面
模板
div id=conter
/div
/模板
脚本
导出默认值{
姓名： conter ，
data (){
返回{
}
},
已创建(){
console.log(这个. route.params.id，这个$路线。参数。姓名)；
},
}
/脚本
到此这篇关于某视频剪辑软件的七种传值方式的文章就介绍到这了，更多相关某视频剪辑软件传值方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。