vue2.0中组件传值的几种方式总结

<template>
  <div id="app">
    <img alt="Vue loGo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your vue.js App"/>
    
    <child></child>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -WEBkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Child.vue
````html
!<template>
  <div class="Child">
      <h1>这是子组件</h1>
  </div>
</template>

<script>
export default {
    name:'Child',
    data() {
        return {
            
        }
    },
}
</script>

<style>

</style>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <child :sendParam="send"></child>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  },
  data() {
    return {
      send:'父组件传给子组件的值'
    }
  },
}
</script>

<template>
  <div class="Child">
      <h1>这是子组件</h1>
      <div>{{sendParam}}</div>
  </div>
</template>

<script>
export default {
    name:'Child',
    props:['sendParam'],
    data() {
        return {
            
        }
    },
}
</script>

<script>
export default {
    name:'Child',
    data() {
        return {
            
        }
    },
        //方法一：用数组获取值
    //    , props:['sendParam'],

    //方法二：用对象获取值
    props:{
        sendParam:String,
    }
}
</script>

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

<template>
  <div class="Child">
      <h1>这是子组件</h1>
      <div>{{sendParam}}</div>
      <button @click="run">子传父</button>
  </div>
</template>

<script>
export default {
    name:'Child',
    data() {
        return {
            childata:'这是子传父的值'
        }
    },
    props:['sendParam'],
    methods: {
        run(){
            this.$emit('event',this.childata)
        }
    },
}
</script>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <child :sendParam="send" @event="reviceChild"></child>

    <div>{{revice}}</div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  },
  data() {
    return {
      send:'父组件传给子组件的值',
      revice:''
    }
  },
  methods: {
    reviceChild(val){
      this.revice=val
    }
  },
}
</script>

<child :sendParam="send" @event="reviceChild" ref="child"></child>

console.log(this.$refs.child);

<button @click="getParent">获取父组件的值</button>

getParent(){
   console.log(this.$parent.send)
}

<child :sendParam="send" @event="reviceChild" ref="child"></child>

<button @click="go">获取ref</button>

go(){
  console.log(this.$refs.child.childata);
}

<child :sendParam="send" @event="reviceChild" ref="child" :that="this"></child>

props:{
     sendParam:{
         type:String,
         default:'111'
     },
     that:{}
 },

mounted() {
    console.log(this.that)
},

mounted() {
    console.log(this.that.send)//子组件拿到父组件的值
},

export default {
	  name: 'App',
	  components: {
	    HelloWorld,
	    Child
	  },
	  provide:{
	    psend:'123456'
	  },
}

export default {
    name:'Child',
    data() {
        return {
        }
    },
    inject:['psend'],
    mounted() {
       console.log(this.psend);
   },
 }