22、Vue组件化开发-组件之间的访问-子组件调用父组件数据

在子组件中通过$parent属性获取父组件中的信息，实际开发中并不常用。

本篇的重点就是记住$parent属性并学会使用。

<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 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)">com1</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)">com1</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)">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(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 style="box-sizing: border-box"></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)">// 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)">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)">com1</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(128, 203, 196)">`<div>我是子组件A <comb></comb></div>`</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)">title</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'我是子组件1的标题'</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 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(128, 203, 174)">getCom1Say</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(195, 232, 141)">'子组件1的方法'</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 style="box-sizing: border-box;color: rgb(84, 110, 122)">// com1组件的子组件</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)">comb</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(128, 203, 196)">`<div>我子组件A的子组件B</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(128, 203, 196)"><button @click="getCom1">我是子组件B，我要访问我父数据</button></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(128, 203, 196)"></div>`</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 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)">methods</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)">getCom1</span>:<span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</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(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">$parent</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(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">$parent</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">title</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)">// 获取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)">console</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">log</span>(<span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">$root</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><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 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>

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

小白

2020年12月05日