Vue学习笔记 - 组件化开发 - 父子组件传值

父向子传值

基本用法

父组件通过属性将值传给子组件

<!-- 父 -->
<div id='app'>
    <!-- 写死的属性值 -->
    <menu-item title="来自父组件的顺序"></menu-item>
    <!-- 动态的数据绑定 -->
    <menu-item :title="title"></menu-item>
</div>

子组件通过props接受传递过来的值

//子
Vue.component('menu-item', {
    props: ['title'],
    template:'<div>{{title}}</div>'
})

props属性命名规则

• 在props中使用驼峰形式，模板中需要使用短横线形式。
• 字符串形式的模板没有这个限制。

//子
Vue.component('menu-item', {
    props: ['menuTitle'],
    template:'<div>{{menuTitle}}</div>'
})

<!-- 父 -->
<div id='app'>
    <!-- 这里不能用menuTitle -->
    <menu-item :menu-title="ptitle"></menu-item>
</div>

props属性值类型

• 字符串String
• 数值Number
• 布尔值Boolean
• 数组Array
• 对象Object

示例：

html:

<div id='app'>
    <menu-item :pstr='pStr' :pnumber='pNumber' :pboo='pBoo' :parr='pArr' :pobj='pObj'></menu-item>
</div>

js:

Vue.component('menu-item', {
    props: ['pstr', 'pnumber', 'pboo', 'parr', 'pobj'],
    template: `
    <div>
        <div>{{pstr}}</div>
        <div>{{pnumber}}</div>
        <div>{{pboo}}</div>
        <ul>
            <li :key='index' v-for='(item, index) in parr' >{{item}}</li>
        </ul>
        <div>
            <div>{{pobj.name}}</div>
            <div>{{pobj.age}}</div>
        </div>
    </div>
    `
})

var vm = new Vue({
    el: '#app',
    data: {
        pStr: '字符串',
        pNumber: 19,
        pBoo: true,
        pArr: ['apple', 'orange'],
        pObj: {
            name: 'ma',
            age: 24
        }
    }
})

注意：

对于布尔和数值类型的传值需要通过 : 进行绑定，才可以拿到对应的布尔和数值类型，否则就都成字符串了。

---

子向父传值

props传递数据原则：单向数据流

只能父传给子，子组件不能操作props中的数据。

基本用法

1. 子组件触发事件，父组件监听到这个事件后触发父组件的操作行为

子组件通过自定义事件向父组件传递信息：

<button @click='$emit("enlarge-text")'>扩大父组件字体大小</button>

父组件监听子组件的事件：

<menu-item @enlarge-text='handle'></menu-item>

示例：

html:

<div id='app'>
    <div :style='{fontSize: fontSize + "px"}'>{{msg}}</div>
    <menu-item @enlarge-text='handle'></menu-item>
</div>

js:

Vue.component('menu-item', {
    template: `
    <div>
        <button @click='$emit("enlarge-text")'>扩大父组件字体大小</button>
    </div>
    `
})

var vm = new Vue({
    el: '#app',
    data: {
        msg: '父字',
        fontSize: 10
    },
    methods: {
        handle: function(){
            // 扩大字体大小
            this.fontSize += 5;
        }
    }
})

2. 子组件向父组件具体传值

子组件通过参数向父组件传值：

<button @click='$emit("enlarge-text", 5)'>扩大父组件字体大小</button>

父组件通过 $event 获取子组件传来的数据：

<menu-item @enlarge-text='handle($event)'></menu-item>

示例：

html:

<div id='app'>
    <div :style='{fontSize: fontSize + "px"}'>{{msg}}</div>
    <menu-item @enlarge-text='handle($event)'></menu-item>
</div>

js:

Vue.component('menu-item', {
    template: `
    <div>
        <button @click='$emit("enlarge-text", 5)'>扩大父组件字体大小</button>
    </div>
    `
})

var vm = new Vue({
    el: '#app',
    data: {
        msg: '父字',
        fontSize: 10
    },
    methods: {
        handle: function(val){
            console.log(val);
            // 扩大字体大小
            this.fontSize += val;
        }
    }
})