Vue-prorps

props:外部数据、属性

语法

• message="n"传入字符串
• :message="n"传入vue实例的this.n数据
• :fn="add"传入vue实例的this.add函数

示例一

//main.js文件
import Vue from 'vue'
Vue.config.productionTip = false;
import Demo from './demo.vue'

new Vue({
    components: { Demo },
    template: `
      <div>
      这是父组件{{n}}   //实例中的数据n
      <hr>
    <Demo :message="n">  //组件中的数据message，值为n的值，如果<Demo message="n"/>没有冒号，                          这里的n是字符串n,如果要n的值，写成 <Demo message="   'n'   "/>
      </div>`,
    data() {
        return {
            n: 0
        }
    }
    
}).$mount('#app')

//demo.vue文件
<template>
    <div>
    这是demo拿到的数据{{message}}   //组件中的数据message
    </div>
    
</template>

<script>
export default {
    props:['message']           //声明外部数据接口，外部可以向message传值
}
</script>

示例二

//main.js文件
import Vue from 'vue'
Vue.config.productionTip = false;
import Demo from './demo.vue'

new Vue({
    components: { Demo },
    template: `
      <div>
      这是父组件{{n}}
      <hr>
    <Demo :message="n" :fn="add"/>      //子组件的message可以调用n的值，
                                        // 子组件的fn可以调用add方法，
                                        //fn的调用间接调用了add,从而改变了n的值，父组件n改变，子组件message间接被改变
      </div>`,
    data() {
        return {
            n: 0
        }
    },
    methods: {
        add() {
            return this.n += 1
        }
    }
}).$mount('#app')

//demo.vue文件
<template>
    <div>这是demo拿到的数据{{message}}     //子组件message值
    <button @click="fn">+1</button>      //子组件调用fn属性
    </div>
    
</template>

<script>
export default {
    props:['message','fn']
}
</script>