二十、Vue组件化开发-子组件传递数据给父组件

作者: 温新

分类: 【Vue.js】

阅读: 1726

时间: 2020-12-05 09:02:12

上一篇文章了解了父组件如何向子组件传递数据,那么本篇文章就来详细了解子组件向父组件传递数据的基本使用。

父向子传递数据,为向下传递数据,使用props属性;

子向父传递数据,为向上传递数据 ,使用$emit属性,其用法格式为$emit('自定义事件名',参数)

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)"><!-- 子组件 --></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">child</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">@parent-receive-click</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"parentReceiveClick"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">child</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">template</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"child"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(84, 110, 122)"><!--4--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">button</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-for</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"item in cates"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">:key</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"item.id"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">@click</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"clickChildButton(item)"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span class="cm-meta cm-mustache" style="box-sizing: border-box;color: rgb(128, 203, 196)">{{ item.cate_name }}</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">button</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 2、定义子组件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">const</span> <span style="box-sizing: border-box">child</span> <span style="box-sizing: border-box">=</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">      <span style="box-sizing: border-box;color: rgb(128, 203, 174)">template</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#child"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span> () {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">          <span style="box-sizing: border-box;color: rgb(199, 146, 234)">return</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">              <span style="box-sizing: border-box;color: rgb(128, 203, 174)">cates</span>:[</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                  {<span style="box-sizing: border-box;color: rgb(128, 203, 174)">id</span>:<span style="box-sizing: border-box;color: rgb(247, 118, 105)">1</span>,<span style="box-sizing: border-box;color: rgb(128, 203, 174)">cate_name</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'php'</span>},</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                  {<span style="box-sizing: border-box;color: rgb(128, 203, 174)">id</span>:<span style="box-sizing: border-box;color: rgb(247, 118, 105)">2</span>,<span style="box-sizing: border-box;color: rgb(128, 203, 174)">cate_name</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'vue'</span>},</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                  {<span style="box-sizing: border-box;color: rgb(128, 203, 174)">id</span>:<span style="box-sizing: border-box;color: rgb(247, 118, 105)">3</span>,<span style="box-sizing: border-box;color: rgb(128, 203, 174)">cate_name</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'laravel'</span>}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">              ]</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">          }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">methods</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 6、子组件自定义事件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(128, 203, 174)">clickChildButton</span>:<span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> (<span style="box-sizing: border-box">item</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 子组件通过$emit向父组件发射事件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">$emit</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'parent-receive-click'</span>,<span style="box-sizing: border-box;color: rgb(128, 203, 196)">item</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    };</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 1、实例化vue</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 3、注册子组件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">components</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(128, 203, 174)">child</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">        </span><span class="cm-property CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: rgb(128, 203, 174)">methods</span><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">:{</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">            </span><span class="cm-property CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: rgb(128, 203, 174)">parentReceiveClick</span><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">:</span><span class="cm-keyword CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: rgb(199, 146, 234)">function</span><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">(</span><span class="cm-def CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color)  !important">item</span><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">){</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">                </span><span class="cm-variable CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: rgb(130, 177, 255)">console</span><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">.</span><span class="cm-property CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: rgb(128, 203, 174)">log</span><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">(</span><span class="cm-variable-2 CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: rgb(128, 203, 196)">item</span><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">)</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">            }</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class=" CodeMirror-selectedtext" style="box-sizing: border-box;text-shadow: none;background: var(--select-text-bg-color) !important;color: var(--select-text-font-color) !important">        }</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>

详解Vue子传父数据

1)实例化vue

2)定义子组件模板child,data属性中写入数据,并在子组件模板中渲染输出<button v-for="item in cates" :key="item.id"></button>

3)vue实例中注册子组件

4)渲染输出子组件。<child></child>

5)子组件渲染列表中绑定点击事件<button @click="clickChildButton(item)"></button>

6)子组件methods中绑定事件,并向父组件发送事件

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// child子组件中的方法</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(130, 177, 255)">methods</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 子组件自定义事件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(130, 177, 255)">clickChildButton</span>:<span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> (<span style="box-sizing: border-box">item</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 子组件通过$emit向父组件发射事件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">$emit</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'parent-receive-click'</span>,<span style="box-sizing: border-box;color: rgb(128, 203, 196)">item</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>

7)父实例模板中监听子组件发送的自定义事件<child @parent-receive-click="parentReceiveClick"></child>

8)父组件(也就是vue实例)中,绑定监听的方法

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// vue实例中的方法,也就是父组件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(130, 177, 255)">methods</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(130, 177, 255)">parentReceiveClick</span>:<span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span>(<span style="box-sizing: border-box">item</span>){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(130, 177, 255)">console</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">log</span>(<span style="box-sizing: border-box;color: rgb(128, 203, 196)">item</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>

到此,子组件向父组件传递数据完成。

我是小白,期待和优秀的你一起同行!

小白

2020年12月05日

请登录后再评论