先在父组件中引入子组件 例如:import Add from '路径' 然后在export default里面映射成表签 componts:{ Add}
只需在父组件上加入<Add/>标签便是引入了子组件内容 那么父组件中得值如何传值到子组件那 在父组件中data声明变量例如
声明变量 aa[] 只需在子组件标签中加入<Add :aa="aa"/>即可传入子组件中 那么子组件便在 export default中声明接受属性 props:['aa']
父组件向子组件传值:
父组件内容:
<template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputNames="name"><!--强制绑定的名称要和子组件一致--></child> </div> </template> <script> import child from './child'/*引入子组件*/ export default { components: { child/*注册子组件为标签*/ }, data () { return { name: '' } } } </script>
子组件内容:
<template> <div> 子组件: <span>{{inputNames}}<!--子组件绑定的值--></span> </div> </template> <script> export default { // 接受父组件的值 props: { inputNames:'', } } </script>
子组件向父组件传值:
父组件内容:
<template> <div> 父组件: <span>{{name}}</span> <br> <br> <!-- 引入子组件 定义一个on的方法监听子组件的状态--> <child @childByValue="childByValue"></child> </div> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childByValue: function (childValue) { // childValue就是子组件传过来的值 this.name = childValue } } } </script>
子组件内容:
<template> <div> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </div> </template> <script> export default { data () { return { childValue: '我是子组件的数据' } }, methods: { childClick () { // childByValue是在父组件on监听的方法 // 第二个参数this.childValue是需要传的值 this.$emit('childByValue', this.childValue) } } } </script>
非父子组件进行传值
非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。
公共bus.js
//bus.js
import Vue from 'vue'
export default new Vue()
组件A:
<template>
<div>
A组件:
<span>{{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug,来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
组件B:
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>