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,用于接收父组件传递的值
{{key}}: {{item}}
export default {
name: 'child',
props: {
c: Array
}
}
在Home.vue中注册Child组件,并在template的div标签中添加home-child标签,标签中使用v-bind指令绑定c。子组件通过props就可以接受到这个父组件传递的值。
import HomeChild from '@/components/common/Child'
export default {
name: 'home',
components: {
HomeChild
},
data () {
return {
c:[1,2,3]
}
}
}
结果
3.子组件向父组件传值
给按钮绑定点击事件ChildClick
在事件的函数中使用$emit来触发一个自定义事件,并传递一个参数,这个参数就是子组件要传递给父组件的值。
{{key}}: {{item}}
点击向父组件传值
{{data}}
export default {
name: 'child',
props: {
c: Array,
data: String
},
methods: {
ChildClick: function () {
this.$emit("ListenChild","I am child.vue")
}
}
}
在父组件中的home-child标签中监听该自定义事件,并添加一个响应该事件的方法ShowChild。
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)
}
}
}
结果:
点击按钮后: