& lt; div id=坝τ谩北?
& lt; !——父组件,可以在引用子组件的时候,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用——比;
& lt; com1 v-bind: parentmsg=拔毒弊４? lt;/com1>
& lt;/div>//创建Vue实例,得到视图模型
var vm=new Vue ({
埃尔:“#应用”,
数据:{
味精:“123啊,父组件中的数据的
},
方法:{},
组件:{//结论:经过演示,发现,子组件中,默认无法访问到父组件中的数据上的数据和方法中的方法
com1: {
数据(){//注意:子组件中数据的数据,并不是通过父组件传递过来的,而是子组件自身私有的,比如:子组件通过Ajax,请求回来的数据,都可以放身到数据上;//数据上的数据,都是可读可写的;
返回{
标题:“123”,
内容:“回调”
}
},
模板:“& lt; h2 @click=案谋洹痹谡馐亲幼榧? - - - - - {{parentmsg}} & lt;/h2>”,//注意:组件中的所有道具中的数据,都是通过父组件传递给子组件的//道具中的数据,都是只读的,无法重新赋值
道具:[' parentmsg ']//把父组件传递过来的parentmsg属性,先在道具数组中,定义一下,这样,才能使用这个数据,只读,写的话会报警告
指示:{},
过滤器:{},
组件:{},
方法:{
改变(){
这一点。parentmsg='被修改了的
}
}
}
}
});
& lt; div id=坝τ谩北?
& lt; !——父组件向子组件传递方法,使用的是事件绑定机制,v,当我们自定义了一个事件属性之后,那么,子组件就能够,通过某些方式,来调用传递进去的这个方法了——比;
& lt; com2 @func="显示"祝辞& lt;/com2>
& lt;/div>
& lt;模板id=皌mpl”比;
& lt; div>
& lt; h2>这是子组件& lt;/h2>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/这是子组件中的按钮,点击它,触发父组件传递过来的func方法”@click=癿yclick”比;
& lt;/div>
& lt;/template>//定义了一个字面量类型的组件模板对象
var com2={
模板:“# tmpl ',//通过指定了一个Id,表示说,要去加载这个指定Id的模板元素中的内容,当作组件的HTML结构
数据(){
返回{
sonmsg:{的名字:“小头儿子”,年龄:6}
}
},
方法:{
myclick () {//当点击子组件的按钮的时候,如何拿到父组件传递过来的func方法,并调用这个方法? ? ?//释放英文原意:是触发,调用,发射的意思//这个。释放美元(“func123”, 123年,456年)
这一点。发出(“函数”,this.sonmsg)美元
}
}
}//创建Vue实例,得到视图模型
var vm=new Vue ({
埃尔:“#应用”,
数据:{
datamsgFormSon:零
},
方法:{
展示(数据){//控制台。日志(“调用了父组件身上的显示方法:——“+数据)
console.log(数据);
这一点。datamsgFormSon=数据
}
},
组件:{
com2//com2: com2
}
});
难道在于理解父组件向子组件传方法
& lt; div id=坝τ谩北?
& lt; cmt-box @func=" loadComments "祝辞& lt;/cmt-box>
& lt; ul类="列表组"比;
& lt;李类=" list-group-item " v=跋钅苛斜怼?关键=癷tem.id”比;
& lt;跨类=盎照隆弊４瞧缆廴?{{项目。用户}}& lt;/span>
{{项目。内容}}
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;模板id=皌mpl”比;
& lt; div>
祝辞& lt; div class="形式的班级”;
& lt; label>评论人:& lt;/label>
& lt;输入类型=拔谋尽崩?v模型“表单控件”=坝没А痹?
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt; label>评论内容:& lt;/label>
& lt; textarea类=v模型“表单控件”=澳谌荨弊４? lt;/textarea>
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/发表评论”类=癰tn btn-primary @click”=皃ostComment”比;
& lt;/div>
& lt;/div>
& lt;/template>
var commentBox={
数据(){
返回{
用户:”,
内容:“
}
},
模板:“# tmpl”,
方法:{
postComment(){//发表评论的方法//分析:发表评论的业务逻辑//1。评论数据存到哪里去? ? ?存放到了localStorage本地文件中。setItem (cmt,”)//2。先组织出一个最新的评论数据对象//3。想办法,把第二步中,得到的评论对象,保存到本地文件中://3.1 localStorage只支持存放字符串数据,要先调用JSON.stringify//3.2在保存最新的评论数据之前,要先从localStorage获取到之前的评论数据(字符串),转换为一个数组对象,然后,把最新的评论,推到这个数组//3.3如果获取到的localStorage中的评论字符串,为空不存在,则可以返回一个“[]”让JSON。解析去转换//3.4把最新的评论列表数组,再次调用JSON。stringify转为数组字符串,然后调用localStorage.setItem ()
var评论={id: Date.now(),用户:这个。用户,内容:这个。内容}//从localStorage中获取所有的评论
var=JSON.parse列表(localStorage.getItem (cmt) | |“[]”)
list.unshift(评论)//重新保存最新的评论数据
localStorage。setItem (cmt, JSON.stringify(列表)
这一点。用户=Ｄ谌?"////this.loadComments () & # 63; & # 63; & # 63; & # 63; & # 63;
美元。排放(函数的)
}
}
}//创建Vue实例,得到视图模型
var vm=new Vue ({
埃尔:“#应用”,
数据:{
列表:(
{id: Date.now()、用户:“李白”,内容:“天生我材必有用"},
{id: Date.now()、用户:“江小白”,内容:“劝君更尽一杯酒"},
{id: Date.now()、用户:“小马”,内容:“我姓马,风吹草低见牛羊的马'}
]
},
beforeCreate(){//注意:这里不能调用loadComments方法,因为在执行这个钩子函数的时候,数据和方法都还没有被初始化好
},
创建(){
this.loadComments ()
},
方法:{
loadComments(){//从本地的localStorage中,加载评论列表
var=JSON.parse列表(localStorage.getItem (cmt) | |“[]”)
这一点。列表=}
},
组件:{
“cmt-box”: commentBox
}
});
