vue父子组件传值
Posted bigox
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue父子组件传值相关的知识，希望对你有一定的参考价值。
父子组件
1.父组件往子组件传值(常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="vue.js"></script>
<script>
//子组件2
//第一步:生子2 挂子往App里挂, 不需要挂Vue里
let Vheader = //对象
data()
return
,
//第一步(传值的 ): 子组件挂载父组件的属性props 挂载之后就可以在子组件内部使用父组件传过来的数据了*****
props:["msg","post"],
//template 是一个组件模板,一定要用一个根(父)元素包裹起来,所以一定要有一个div闭合****
//第三步(传值):展示父组件传来的值
template:`
<div>
<h2>生子是在子组件中</h2>
<h2 style="color:red">挂子和用子是在父组件中</h2>
<h3>msg</h3>
<h3>post.title</h3>
</div>
`,
;
//第一步: 声子 Vue中组件的首字母要大写, 跟标签区分
//组件中的data必须是个函数,一定要有返回值
let App = //跟的是一个对象 这个对象里 就是除了下面的Vue中,el以外的所有属性
data()
// 父-->子传值 通过props 属性
// post传入一个对象的多个属性
return
text: "我是Vheader的父组件,想把数据传过去",
post:
id:1,
title:"My journey with Vue"
,
//第四步: 给子组件里写内容. 当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
//在<h2>text</h2>中的text部分可以放头部组件,内容组件和侧边栏组件 ************
// 第三步:用子2 <Vheader></Vheader>, 下一步去对应模板Vheader的template里写内容
//第二步(传值的): 父组件中通过v-bind绑定自定义属性, 在Vheader定义自定义的属性 :msg 这个msg一定是跟子组件里的props:["msg"]一样***
// 传入一个对象的多个属性用post
template: `
<div id="a">
<Vheader v-bind:msg="text" v-bind:post="post"></Vheader>
</div>
`,
//给子组件定义方法 比如说a标签的超链接
methods:
,
components:
// 第二步:挂子2
Vheader
,
new Vue(
el: "#app", //绑定根元素 是上面的id="app"
data()
return msg: "alex"
,
components:
// 第二步: 挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
App //如果key和value一样,可以只写App 替代App:App
)
</script>
</body>
</html>其他方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <App></App> </div> <script src="vue.js"></script> <script> //声明一个全局组件 Vbtn组件 Vue.component("Vbtn", data() //return的返回值是传给父组件func_clickHandler()的??? return//props:["id"] 声明完就相当于在return里绑定了 , template:`<button @click="clickHandler"> id </button>`, // 传过来的值id props:["id"],//声明之后可以在任何地方用,比如在模板中通过id可以获取,在method里通过this.id获取 methods: clickHandler() //这个方法出发父组件里的内容 console.log(this);// 谁调用的这个函数,this就是谁,这里是Vbtn. 每个组价中的this指当前组件对象 ***** this.id++ //this.$emit("触发父组件中声明的事件","传值")***** //第二步:在子组件中通过$emit 触发父组件里绑定的自定义事件@clickHandler this.$emit("clickHandler",this.id); ) let Vheader = //对象 data() return , props:["msg","post"], // 第一步:先在父组件里自定义一个触发事件@clickHandler template:` <div> <h2>我是header组件</h2> <h2>生子是在子组件中</h2> <h2 style="color:red">挂子和用子是在父组件中</h2> <h3>msg</h3> <h3>post.title</h3> <Vbtn v-bind:id="post.id" @clickHandler="func_clickHandler"></Vbtn> </div> `, methods: func_clickHandler(val) alert(val) this.$emit("fatherheader",val) let App = //跟的是一个对象 这个对象里 就是除了下面的Vue中,el以外的所有属性 data() // 父-->子传值 通过props 属性 // 传入一个对象的多个属性post return text: "我是Vheader的父组件,想把数据传过去", post: id:1, title:"My journey with Vue" , template: ` <div id="a"> 我是父组件的post.id <Vheader v-bind:msg="text" v-bind:post="post" @fatherheader="father_header"></Vheader> </div> `, //给子组件定义方法 比如说a标签的超链接 methods: father_header(val) this.post.id=val //修改完数据对应的 我是父组件的post.id里的数据跟着修改 , components: // 第二步:挂子2 Vheader , new Vue( el: "#app", //绑定根元素 是上面的id="app" data() return msg: "alex" , components: // 第二步: 挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件 App //如果key和value一样,可以只写App 替代App:App ) </script> </body> </html>
2.子往父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="vue.js"></script>
<script>
//声明一个全局组件 Vbtn组件
Vue.component("Vbtn",
data()
//return的返回值是传给父组件func_clickHandler()的???
return//props:["id"] 声明完就相当于在return里绑定了
,
template:`<button @click="clickHandler">
id
</button>`,
// 传过来的值id
props:["id"],//声明之后可以在任何地方用,比如在模板中通过id可以获取,在method里通过this.id获取
methods:
clickHandler() //这个方法出发父组件里的内容
console.log(this);// 谁调用的这个函数,this就是谁,这里是Vbtn. 每个组价中的this指当前组件对象 *****
this.id++
//this.$emit("触发父组件中声明的事件","传值")*****
//第二步:在子组件中通过$emit 触发父组件里绑定的自定义事件@clickHandler
this.$emit("clickHandler",this.id);
)
let Vheader = //对象
data()
return
,
props:["msg","post"],
// 第一步:先在父组件里自定义一个触发事件@clickHandler
template:`
<div>
<h2>我是header组件</h2>
<h2>生子是在子组件中</h2>
<h2 style="color:red">挂子和用子是在父组件中</h2>
<h3>msg</h3>
<h3>post.title</h3>
<Vbtn v-bind:id="post.id" @clickHandler="func_clickHandler"></Vbtn>
</div>
`,
methods:
func_clickHandler(val)
alert(val)
this.$emit("fatherheader",val)
let App = //跟的是一个对象 这个对象里 就是除了下面的Vue中,el以外的所有属性
data()
// 父-->子传值 通过props 属性
// 传入一个对象的多个属性post
return
text: "我是Vheader的父组件,想把数据传过去",
post:
id:1,
title:"My journey with Vue"
,
template: `
<div id="a">
我是父组件的post.id
<Vheader v-bind:msg="text" v-bind:post="post" @fatherheader="father_header"></Vheader>
</div>
`,
//给子组件定义方法 比如说a标签的超链接
methods:
father_header(val)
this.post.id=val //修改完数据对应的 我是父组件的post.id里的数据跟着修改
,
components:
// 第二步:挂子2
Vheader
,
new Vue(
el: "#app", //绑定根元素 是上面的id="app"
data()
return msg: "alex"
,
components:
// 第二步: 挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
App //如果key和value一样,可以只写App 替代App:App
)
</script>
</body>
</html>以上是关于vue父子组件传值的主要内容，如果未能解决你的问题，请参考以下文章