1. 环境搭建
下载 vue-cli:
npm install -g vue-cli
初始化项目:
vue init webpack vue-demo
进入 vue-demo 文件夹: cd vue-demo
下载安装依赖: npm install
运行该项目: npm run dev
2. 父组件向子组件传值
src/components / 文件夹下建一个组件, Home.vue
创建子组件, 在 src/components / 文件夹下新建一个文件夹, 在新建文件夹中新建一个组件 Child.vue
在 Child.vue 中创建 props, 用于接收父组件传递的值
- <template>
- <div>
- <div v-for="(item,key) of c" :key="key">
- {{key}}: {{item}}
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'child',
- props: {
- c: Array
- }
- }
- </script>
- <style scoped>
- </style>
在 Home.vue 中注册 Child 组件, 并在 template 的 div 标签中添加 home-child 标签, 标签中使用 v-bind 指令绑定 c. 子组件通过 props 就可以接受到这个父组件传递的值.
- <template>
- <div class="hello">
- <home-child v-bind:c="c"></home-child>
- </div>
- </template>
- <script>
- import HomeChild from '@/components/common/Child'
- export default {
- name: 'home',
- components: {
- HomeChild
- },
- data () {
- return {
- c:[1,2,3]
- }
- }
- }
- </script>
- <style scoped>
- </style>
结果
12.png
3. 子组件向父组件传值
给按钮绑定点击事件 ChildClick
在事件的函数中使用 $emit 来触发一个自定义事件, 并传递一个参数, 这个参数就是子组件要传递给父组件的值.
- <template>
- <div>
- <div v-for="(item,key) of c" :key="key">
- {{key}}: {{item}}
- </div>
- <button v-on:click="ChildClick"> 点击向父组件传值 </button>
- <span>{{data}}</span>
- </div>
- </template>
- <script>
- export default {
- name: 'child',
- props: {
- c: Array,
- data: String
- },
- methods: {
- ChildClick: function () {
- this.$emit("ListenChild","I am child.vue")
- }
- }
- }
- </script>
- <style scoped>
- </style>
在父组件中的 home-child 标签中监听该自定义事件, 并添加一个响应该事件的方法 ShowChild.
- <template>
- <div class="hello">
- <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
- </div>
- </template>
- <script>
- import HomeChild from '@/components/common/Child'
- export default {
- name: 'Home',
- components: {
- HomeChild
- },
- data () {
- return {
- c:[1,2,3],
- data: " "
- }
- },
- methods: {
- ShowChild: function (data) {
- this.data = data
- console.log("data:" + data)
- }
- }
- }
- </script>
- <style scoped>
- </style>
结果:
13.png
点击按钮后:
14.png
来源: http://www.jianshu.com/p/4a4b96d292df