父级组件变量传给子级组件
父组件中，子级组件引入后，给子级组件标签使用v-bind，声明一个变量用于存放父级传来的值，（变量名不要使用驼峰式）
子级组件通过props:[“变量名”]来接收父级传来的值，子组件可以直接使用该变量
<!-- 父级传子级 -->
<div id="app">
<!-- 通过bind将父级的变量传给子集 -->
<son :father="father"></son>
</div>
<script>
Vue.component("son", {
template:`<div>这是子级组件调用父级的变量{{father}}</div>`,
data(){
return{
}
},
props:["father"] // 接收父级传过来的变量
})
new Vue({
el: '#app',
data() {
return {
father:"这是父级的变量"
}
},
methods: {
}
});
</script>
子组件将变量传给父组件
方法一
- 子级组件中，添加事件，由事件进行触发，在组件中的methods，添加方法，在方法中使用this.$emit("自定义事件名"，传递的变量)将变量抛出去
- 父级组件中，给子组件标签名添加事件：@“自定义事件名=“自定义事件名2””，然后在vue实例中的methods里，将自定义事件名2进行声明，在这个方法中，我们就已经可以使用子集传来的方法了
html代码
<!-- 子集到父级，使用this.$emit 子集创建事件，将变量传出，父级使用事件，获取到变量 -->
<div id="app">
<son @send1="send"></son>
<hr>
父级调用子级变量 {{name2}}
</div>
<template id="son">
<div>
这是子组件的变量 {{name1}}
<!-- 子级通过事件将变量传给父级 -->
<button @click="sonsend">点击传给父级</button>
</div>
</template>
js代码
Vue.component("son", {
template:"#son",
data(){
return{
name1:"这是子级的变量"
}
},
methods:{
sonsend(){
this.$emit("send1",this.name1) // 通过$emit将变量抛出
}
}
})
new Vue({
el: '#app',
data() {
return {
name2:""
}
},
methods: {
send(e){
console.log(e);
this.name2=e
}
}
});
- 方法2
-
在父组件中，给子组件标签名中添加ref属性，`ref="自定义名称"`\ -
父组件中通过事件，可以使用`this.$refs`获取到子组件，然后可以一层一层获取到子组件中的变量
html代码
<div id="app">
<son ref="child"></son>
<son2 ref="child2"></son2>
<button @click="getChild">点击获取子级的变量</button>
</div>
<template id="son">
<div>
这是子级 {{name1}}
</div>
</template>
<template id="son2">
<div>
这是子级二 {{name2}}
</div>
</template>
js代码
let son = {
template: "#son",
data(){
return{
name1:"这是子级的变量",
name11:"这是子级变量11"
}
}
}
let son2 = {
template: "#son2",
data(){
return{
name2:"这是子级的变量二"
}
}
}
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
getChild(){
console.log(this.$refs);
}
},
components: {
son,son2
}
});
兄弟之间传递变量
-
方法一 子组件将变量传给父级，再由父级将变量传递给需要传递的子组件
html代码
<div id="app">
<!-- 3.将父级的变量传给子级 -->
<bro1 :father="father"></bro1>
<bro2 @brother="brother"></bro2>
</div>
js代码
Vue.component("bro1", {
template:`<div>这是兄弟元素一 {{father}}</div>`,
props:["father"] // 4.子级接收父亲的变量
});
Vue.component("bro2", {
template:`<div>这是兄弟元素二 <button @click="brosend">点击传递兄弟变量</button></div>`,
data(){
return{
name:"这是兄弟元素的变量"
}
},
methods:{
brosend(){
this.$emit("brother",this.name); // 1.先传递给父亲，再由父亲传给兄弟
}
}
})
new Vue({
el: '#app',
data() {
return {
father:""
}
},
methods: {
brother(e){
this.father=e; // 2.将子级传来的变量赋到自己的变量上
}
}
});
方法二 使用数据共享中心，由中间件传值，bus 首先实例化bus，const bus = new Vue() 发送方通过事件使用bus将变量传递出去，bus.on("自定义变量名",箭头函数) html代码
<div id="app">
<bro1></bro1>
<bro2></bro2>
</div>
js代码
// 1.将bus实例化
const bus = new Vue();
Vue.component("bro1", {
template:`<div>这是兄弟元素一 {{name2}}</div>`,
data(){
return{
name2:""
}
},
// 3.操作传递过来的变量
mounted() {
bus.$on("brother",e=>{ // 用箭头函数，不然会有this指向的问题
this.name2=e
})
},
})
Vue.component("bro2", {
template:`<div>这是兄弟元素二 <button @click="brosend">点击传给兄弟</button></div>`,
data(){
return{
name:"这是兄弟的变量"
}
},
methods:{
// 2.通过方法将变量进行传递
brosend(){
bus.$emit("brother",this.name)
}
}
})
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
}
});
