Vue.js中⽗⼦组件之间的传值和传⽅法
⾃定义的私有组件，不能访问vm实例中的数据
1、⽗组件向⼦组件传值
在使⽤私有组件的时候，通过属性绑定的形式，把需要传递给⼦组件的数据，以属性绑定的形式传递到私有组件中
<div id="app">
<!-- 1、在使⽤组件的时候，使⽤绑定命令，将所需要的VM实例数据绑定到私有组件中 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123 啊-⽗组件中的数据'
},
methods: {},
components: {
ajax实例里面的函数com1: {
// 3、直接⽤插值表达式的形式直接使⽤
template: '<h1>这是⼦组件 --- {{parentmsg}}</h1>',
// 2、需要先在props中定义⼀下上⾯绑定的数据，注意props是个数组，⾥⾯所有数据都是从VM实例中传过来的
props: ['parentmsg']
}
}
})
</script>
私有组件中的数据是实例私有的，⽐如通过ajax请求回来的数据，数据是可读可写的，
props中的数据是VM实例传递过来的，只读
2、⽗组件向⼦组件传递函数
<div id="app">
<!-- 1、使⽤的时候直接使⽤事件绑定机制 v-on简写就是@ 当⾃定义了⼀个事件属性之后，⼦组件就能够通过某些⽅式调⽤这个传递的⽅法 --> <com2 v-on:func="show"></com2>
</div>
<template id="templ">
<div>
<h1>这是⼦组件</h1>
<input type="button" value="触发⽗组件传递过来的show⽅法" @click="myclick">
</div>
</template>
<script>
var com2 = {
template: '#templ',
data() {
return {
sonmsg: {
name: '⼩头⼉⼦',
age: 6
}
}
},
methods: {
myclick() { //在⼦组件的⽅法中使⽤传递过来的函数
// emit意思是触发调⽤的意思，前⾯是函数名字，后⾯是参数
this.$emit('func', this.sonmsg)
}
},
}
var vm = new Vue({
el: '#app',
data: {
hello:'传递的值',
datafromSon: null
},
methods: {
show(data) {
console.log('调⽤了⽗组件中的⽅法-----' + this.hello)
}
},
components: {
com2
}
})
1、使⽤的时候时间绑定v-on简写就是@
2、定义组件的时候直接在组件的⽅法中使⽤
3、最后在组件中使⽤定义的⽅法
其实本质就是，私有组件定义⾃⼰的函数，只不过在⾃⼰的函数中使⽤this.$emit('绑定的函数名'，参数)调⽤⽗组件的函数，
3、⼦组件向⽗组件传值
这种情况就是使⽤上述的情况达到效果，达到效果要使⽤到参数列表，通过参数列表的形式传值
<!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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- 事件的绑定 -->
<com1 @func="show"></com1>
</div>
<template id="temp">
<div>
<h1>private component</h1>
<input type="button" value="调⽤⽗组件函数传值" @click="myclick">
</div>
</template>
<script>
// 声明⼦组件
var com1={
template:'#temp',
data() {
return {
sonmsg:'⼉⼦的消息'
}
},
methods:{
myclick(){
// 将⼦组件中的值通过this指针，传递给函数
this.$emit('func',this.sonmsg)
}
}
}
var vm = new Vue ({
el:'#app',
data: {
parent:null
},
methods: {
show(sonmsg){
// 函数中通过转递过来的值，将⼦组件中的值写⼊⽗组件中
this.parent=sonmsg
}
},
components: {
// ⽗组件注册
com1
}
})
</script>
</body>
</html>
注意数据的使⽤需要加上this指针
简单的实现发表评论的功能
<!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="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">評論⼈:{{item.user}}</span>
{{t}}
</li>
</ul>
</div>
<template id="temp">
<div>
<div class="form-group">
<label>评论⼈：</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="postComment"> </div>
</div>
</template>
<script>
var commentbox = {
template: '#temp',
data() {
return {
user: null,
content: null,
}
},
methods: {
click(){
alert('------------------------')
},
postComment() {
if(this.user===''||this.user===null){
alert('⽤户名不能是空')
return true
}
var comment = {
id: w(),
user: this.user,
content: t
}
var list = JSON.Item('cmts') || '[]') list.unshift(comment)
localStorage.setItem('cmts',JSON.stringify(list))
this.user = t = ''
this.$emit('func')
},
},
}
var vm = new Vue({
el: '#app',
data: {
list: []
},
methods: {
loadComments(){
var list= JSON.Item('cmts')||'[]')
this.list=list
}
},
created() {
this.loadComments()
},
components: {
'cmt-box': commentbox
}
})
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论