自定义的私有组件，不能访问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: {
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>
{{item.content}}
</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: Date.now(),
user: this.user,
content: this.content
}
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
list.unshift(comment)
localStorage.setItem('cmts',JSON.stringify(list))
this.user = this.content = ''
this.$emit('func')
},
},
}
var vm = new Vue({
el: '#app',
data: {
list: []
},
methods: {
loadComments(){
var list= JSON.parse(localStorage.getItem('cmts')||'[]')
this.list=list
}
},
created() {
this.loadComments()
},
components: {
'cmt-box': commentbox
}
})
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
