Vue学习笔记-组件化（二）

父访问子-children-refs

children

  <div id="app">  
            <cpn></cpn>
            <button @click="btnclick()" >  按钮 </button>  
         
        </div>
        <template id="son">
           <div>
                <ul>
                   <li v-for="item in books" > {{item}} </li>
               </ul>
               <span v-show = "isshow">{{message}} </span>
           </div>
        </template>
        
       <script>
           const cpn ={
               template:`#son`,
               data (){
                   return {
                       message:'hello,world',
                       books:['82年生的金智英','你当像鸟飞向你的山','书店日记','时间的秩序','喜鹊谋杀案'],
                       isshow:false
                   }
               },
               methods:{
                   showmessage() {
                       this.isshow=true;

                   }
               }
           }
           const app = new Vue({
               el:'#app',
               data:{
                   books:['82年生的金智英','你当像鸟飞向你的山','书店日记','时间的秩序','喜鹊谋杀案'],
               },
               methods:{
                    btnclick(){
                        console.log(this.$children[0])
                        this.$children[0].showmessage()
                    }
               },
               components:{
                   cpn
               }
           }) 
       </script>

refs

      <div id="app">  
            <cpn></cpn>
            <cpn ref="aaa" ></cpn>
            <button @click="btnclick()" >  按钮 </button>  
         
        </div>
        <template id="son">
           <div>
               <div>1</div>
               <span v-show = "isshow">{{message}} </span>
           </div>
        </template>
        
       <script>
           const cpn ={
               template:`#son`,
               data (){
                   return {
                       message:'hello,world',
                       isshow:false
                   }
               },
               methods:{
                   showmessage() {
                       this.isshow=true;

                   }
               }
           }
           const app = new Vue({
               el:'#app',
              
               methods:{
                    btnclick(){
                        console.log(this.$refs.aaa);
                        this.$refs.aaa.showmessage()
                    }
               },
               components:{
                   cpn
               }
           }) 
       </script>

子访问父 -parent-root

 <div id="app">  
            <cpn></cpn>
        </div>
        <template id="son">
         <div>
              <div>
                 我是子组件
             </div>
             <button @click="btnclick">按钮 </button>
         </div>
        </template>
        
       <script>
           const cpn ={
               template:`#son`,
               methods:{
                   btnclick(){
                       console.log(this.$parent);
                       console.log(this.$root)
                       console.log(this.$parent.message);
                   }
               }
           }
           const app = new Vue({
               el:'#app',
               data:{
                  message:'hello,world',
               },
               components:{
                   cpn
               }
           }) 
       </script>

插槽slot的基本使用

 <div id="app">  
            <!--对template中的slot部分进行替换-->
          <cpn><span>---左边---</span> </cpn>
        </div>
        <template id="son">
         <div>
             <slot></slot>
              <span>---右边---</span>
         </div>
        </template>
        
       <script>
           const cpn ={
               template:`#son`,
           }
           const app = new Vue({
               el:'#app',
               components:{
                   cpn
               }
           }) 
       </script>

具名插槽的使用

  <div id="app">  
            <cpn> <span slot="left" >---左边---</span>
                    <span slot="center">---中间---</span>
             </cpn>
        </div>
        <template id="son">
         <div>
             <slot name="left"></slot>
              <slot name="center" ></slot>
              <!--默认插槽内容的写法-->
              <slot name="right" ><span>---右边---</span></slot>
         </div>
        </template>
        
       <script>
           const cpn ={
               template:`#son`,
           }
           const app = new Vue({
               el:'#app',
               components:{
                   cpn
               }
           }) 
       </script>

作用域插槽的使用

<div id="app">  
            <cpn></cpn>
            <cpn>
                <template slot-scope="slot"> 
                    <span v-for="item in slot.data">{{item}} </span>
                </template>
            </cpn>
        </div>
        <template id="son">
         <div>
             <slot :data="books">
                 <ul>
                     <li v-for="item in books" >{{item}} </li>
                 </ul>
             </slot>
         </div>
        </template>      
       <script>
           const cpn ={
               template:`#son`,
               data(){
                   return{
                       books:['82年生的金智英','你当像鸟飞向你的山','书店日记','时间的秩序','喜鹊谋杀案']
                   }
               }
           }
           const app = new Vue({
               el:'#app',
               components:{
                   cpn
               }
           }) 
       </script>