vue组件传值

一.Props

在父组件中使用子组件

<template>
 <div>
  父组件:{{mny}}
  <Son1 :mny="mny"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

子组件接受父组件的属性

二.$emit

子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件

<template>
 <div>
  父组件:{{mny}}
  <Son1 :mny="mny" @input="change"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 methods: {
  change(mny) {
   this.mny = mny;
  }
 },
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

子组件触发绑定自己身上的方法

<template>
 <div>
  子组件1: {{mny}}
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  mny: {
   type: Number
  }
 }
};
</script>

这里的主要目的就是同步父子组件的数据,->语法糖的写法

三、EventBus

用于跨组件通知(不复杂的项目可以使用这种方式)
Vue.prototype.$bus = new Vue();
Son2组件和Grandson1相互通信
 mounted() {
  this.$bus.$on("my", data => {
   console.log(data);
  });
 },
mounted() {
  this.$nextTick(() => {
   this.$bus.$emit("my", "我是Grandson1");
  });
 },

四、this.$refs

适用于父组件获取子组件的值。

父组件代码：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="getChildProp()">获取子组件的属性的值</button>
    <button @click="getChildMethod()">获取子组件的方法</button>
  </div>
</template>
<script>
import ChildComponent from './components/ChildComponent.vue'
export default {
  components:{ ChildComponent },
  methods: {
    getChildProp () {
      alert(this.$refs.child.msg) // 子组件child的值
    },
    getChildMethod () {
      this.$refs.child.func() // 子组件child的方法
    }
  }
}
</script>

子组件 ChildComponent.vue 代码：

<template>
	<div></div>
</template>
<script>
export default {
  data () {
    return {
      msg: "子组件child的值"
    }
  },
  methods: {
    func () {
      alert("子组件child的方法")
    }
  }
}
</script>

注意：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

五、 $parent / $child

Vue.component('child',{
        props:{
            value:String, //v-model会自动传递一个字段为value的prop属性
        },
        data(){
            return {
                mymessage:this.value
            }
        },
        methods:{
            changeValue(){
                this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
            }
        },
        <template>:
            <div>
                <input type="text" v-model="mymessage" @change="changeValue"> 
            </div>
    })
    Vue.component('parent',{
        <template>:
            <div>
                <p>this is parent compoent!</p>
                <button @click="changeChildValue">test</button >
                <child></child>
            </div>
        ,
        methods:{
            changeChildValue(){
                this.$children[0].mymessage = 'hello';
            }
        },
        data(){
            return {
                message:'hello'
            }
        }
    })
    var app=new Vue({
        el:'#app',
        <template>:
            <div>
                <parent></parent>
            </div>
    })