父组件向子组件传值
组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据<script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: '这是父组件中的消息'},components: {son: {template: '<h1>这是子组件 --- {{finfo}}</h1>',props: ['finfo']}}});</script>
使用v-bind或简化指令，将数据传递到子组件中：
<div id="app"><son :finfo="msg"></son></div>
<!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"><!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --><com1 v-bind:parentmsg="msg"></com1></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: '123 啊-父组件中的数据'},methods: {},components: {// 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法com1: {data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；// data 上的数据，都是可读可写的；return {title: '123',content: 'qqq'}},template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',// 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的// props 中的数据，都是只读的，无法重新赋值props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据directives: {},filters: {},components: {},methods: {change() {this.parentmsg = '被修改了'}}}}});</script></body></html>
子组件向父组件传值
原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称<son @func="getMsg"></son>
子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用
<div id="app"><!-- 引用父组件 --><son @func="getMsg"></son><!-- 组件模板定义 --><script type="x-template" id="son"><div><input type="button" value="向父组件传值" @click="sendMsg" /></div></script></div><script>// 子组件的定义方式ponent('son', {template: '#son', // 组件模板Idmethods: {sendMsg() { // 按钮的点击事件this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去}}});// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义alert(val);}}});</script>
<!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"><!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 --><com2 @func="show"></com2></div><template id="tmpl"><div><h1>这是 子组件</h1><input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick"></div></template><script>// 定义了一个字面量类型的 组件模板对象var com2 = {template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构data() {return {sonmsg: { name: '小头儿子', age: 6 }}},methods: {myclick() {// 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？// emit 英文原意： 是触发，调用、发射的意思// this.$emit('func123', 123, 456)this.$emit('func', this.sonmsg)}}}// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {datamsgFormSon: null},methods: {show(data) {// console.log('调用了父组件身上的 show 方法: --- ' + data)// console.log(data);this.datamsgFormSon = data}},components: {com2// com2: com2}});</script></body></html>
评论列表案例
目标：主要练习父子组件之间传值
<!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="tmpl"><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 = {data() {return {user: '',content: ''}},template: '#tmpl',methods: {postComment() { // 发表评论的方法// 分析：发表评论的业务逻辑// 1. 评论数据存到哪里去？？？ 存放到了 localStorage 中 localStorage.setItem('cmts', '')// 2. 先组织出一个最新的评论数据对象// 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：// 3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify // 3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个 数组对象， 然后，把最新的评论， push 到这个数组// 3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则 可以 返回一个 '[]' 让 JSON.parse 去转换// 3.4 把 最新的 评论列表数组，再次调用 JSON.stringify 转为 数组字符串，然后调用 localStorage.setItem()var comment = { id: Date.now(), user: this.user, content: this.content }// 从 localStorage 中获取所有的评论var list = JSON.parse(localStorage.getItem('cmts') || '[]')list.unshift(comment)// 重新保存最新的 评论数据localStorage.setItem('cmts', JSON.stringify(list))this.user = this.content = ''// this.loadComments() // ?????this.$emit('func')}}}// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {list: [{ id: Date.now(), user: '李白', content: '天生我材必有用' },{ id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },{ id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }]},beforeCreate(){ // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好},created(){this.loadComments()},methods: {loadComments() { // 从本地的 localStorage 中，加载评论列表var list = JSON.parse(localStorage.getItem('cmts') || '[]')this.list = list}},components: {'cmt-box': commentBox}});</script></body></html>
