vue学习笔记7 -组件之 父子组件之间的访问

$children和$refs的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js"></script>
    </head>
    
    <body>
        <div id="app">
         <cpn></cpn>
         <cpn></cpn>
         <cpn ref='aaa'></cpn>
         <button @click="btnClick">实例</button>
         
        </div>
    </body>
    
  <!--子组件模板-->
  <template id='cpn'>
    <div>
      <h2>我的子组件</h2>
    </div>
    
  </template>

  <script>
  const app = new Vue({
    el:"#app",
    data:{
      message:'你好啊'
    },
    components:{
      cpn:{
        template:"#cpn",
        
        data(){
          return {
            name:'我是子组件的data属性'
          }
        },
        methods:{
          showMessage:function(){
            console.log('showMessage')
          }
        },
        
      }
    },
    methods:{
      btnClick(){
        //console.log(this.$children)
        /*
        this.$children[0].showMessage()
                 console.log(this.$children[1].name)*/
        // console.log(this.$refs.aaa.name)
        this.$refs.aaa.showMessage()
      }
    }
  })
  </script>
</html>
View Code

$parent 和$root的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js"></script>
    </head>
    
    <body>
        <div id="app">
         <cpn></cpn>
        </div>
    </body>
    
  <!--子组件模板-->
  <template id='cpn'>
   <div>
     <h1>我是子组件</h1>
     <ccpn></ccpn>
   </div>
  </template>
  
  <template id='ccpn'>
     <div>
      <h2>我是子子组件</h2>
      <button @click='btnClick'>按钮</button>
    </div>
  </template>

  <script>
  const ccpn = {
    template: "#ccpn",
     methods: {
      btnClick() {
        //1 访问父组件
        console.log(this.$parent)
        console.log(this.$parent.name)
        console.log(this.$root)
        console.log(this.$root.message)
      }
    },
  }
  
  //必须先定义子组件 再定义父组件
  const cpn = {
    template: "#cpn",
    components:{
      ccpn
    },
    data(){
      return {
        name:'我是子组件的name'
      }
    }
  }

  const app = new Vue({
    el:"#app",
    data:{
      message:'你好啊'
    },
    components:{
      cpn
    },
    methods:{
      
    }
  })
  </script>
</html>
View Code

插槽的基本用法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js"></script>
    </head>
    
    <body>
      <div id="app">
        <cpn></cpn>
        <hr />
        <cpn><button>插槽1</button><div>我是div元素</div></cpn>
        <hr />
        <cpn><h3>插槽2</h3></cpn>
      </div>
    </body>
    
    <template id='cpn'>
      <div>
        <h2>我是组件</h2>
        <slot><h3 style="color: red">我是卡槽的默认值</h3></slot>
      </div>
    </template>
    
    <script>
      const cpn={
        template:"#cpn"
      }
      const app = new Vue({
        el:"#app",
        components:{
          cpn
        }
      })
    </script>

</html>
View Code

具名插槽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js"></script>
    </head>
    
    <body>
      <div id="app">
        <cpn><span slot='center' style="color: red" >我要修改中间插槽的标题</span></cpn>
        <hr />
        <cpn><span slot='right' style="color: red">我要修改右边插槽的标题</span></cpn>
        <hr />
        <cpn><span style="color: red">我修改默认的卡槽</span></cpn>
        <hr />
       
      </div>
    </body>
    
    <template id='cpn'>
      <div>
        <h2>我是组件</h2>
        <slot name='left'><span>左边的插槽</span></slot>
        <slot name='center'><span>中间的插槽</span></slot>
        <slot name='right'><span>右边的插槽</span></slot>
        <slot>我是无名卡槽</slot>
       
      </div>
    </template>
    
    <script>
      const cpn={
        template:"#cpn"
      }
      const app = new Vue({
        el:"#app",
        components:{
          cpn
        }
      })
    </script>

</html>
View Code

slop.scope的使用

内容在子组件中，希望父组件告诉我们如何展示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="vue.js"></script>
    </head>
    
    <body>
      <div id="app">
        <cpn></cpn>
        <hr />
       <cpn>
         <template slot-scope='slot'>
           <!-- <span v-for='item in slot.data_p_languages'>{{item}} </span> -->
            <span >{{slot.data_p_languages.join('-')}} </span>
         </template>
       </cpn>
      </div>
    </body>
    
    <template id='cpn'>
      <div>
        <slot :data_p_languages="pLanguages">
          <ul>
            <li v-for="item in pLanguages">{{item}}</li>
          </ul>
        </slot>
       
      </div>
    </template>
    
    <script>
      const cpn={
        template:"#cpn",
        data(){
          return {
            pLanguages:['js','c++','java','go','python','swift']
          }
        }
      }
      const app = new Vue({
        el:"#app",
        components:{
          cpn
        }
      })
    </script>

</html>
View Code

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/polax/p/12934584.html