VUE的slot插槽和ref、$parent

最新推荐文章于 2024-03-21 18:33:48 发布

lql_h

最新推荐文章于 2024-03-21 18:33:48 发布

阅读量1.7k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/lql_h/article/details/102503830

版权

VUE 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

概述

- #### slot插槽

- #### slot就是子组件里给DOM留下的坑位

- #### <子组件>DOM</子组件>

- #### slot是动态的DOM

- #### ref获取子组件实例

- #### 识别：在子组件或元素上使用属性ref="xxxx"

- #### 获取：this.$refs.xxxx 获取元素

- #### $el 是拿其DOM

- #### $parent获取父组件实例（可在子组件直接使用this.$parent即可）

slot插槽

代码

<!DOCTYPE html>

<html>

<head>

    <title>组件化开发</title>

</head>

<body>

    <div id="app">

      

    </div>



    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

       var Parent={

           template:`

              <div>

              我是父组件

              <slot name='hello'></slot>

              </div>

           `,

       }

      

       new Vue({

           el:'#app',

           components:{

              Parent

           },

           template:`

              <div>

                  <parent>

                     <div slot='hello'>我是插槽内容</div>

                     <div slot='hello'>我是插槽内容2</div>

                  </parent>

              </div>

           `,

           data(){

              return{}

           },

       })

    </script>

</body>

</html>

运行效果

我是父组件

我是插槽内容

我是插槽内容2

子组件

代码

<!DOCTYPE html>
<html>
<head>
	<title>组件化开发</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		var Child={
			template:`
				<div>我是子组件</div>
			`,

		}
		var Parent={
			template:`
				<div>
				我是父组件
				<slot name='hello'></slot>
				<child ></child>
				</div>
			`,
			components:{
				Child
			}
		}
		
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template:`
				<div>
					<parent>
						<div>我是插槽内容</div>
						<div slot='hello'>我是插槽内容2</div>
					</parent>
				</div>
			`,
			data(){
				return{}
			},
		})
	</script>
</body>
</html>

运行效果

我是父组件

我是插槽内容2

我是子组件

ref、$parent

代码


<!DOCTYPE html>

<html>

<head>

    <title>组件化开发</title>

</head>

<body>

    <div id="app">

      

    </div>



    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

       var Child={

           template:`

              <div>我是子组件</div>

           `,

           data(){

              return {

                  msg:'hello'

              }

           },

           created(){

              //数据加载完成 子组件钩子

              console.log(this.$parent)

              console.log(this.$parent.parents)



           }



       }

       var Parent={

           template:`

              <div>

              我是父组件

              <slot name='hello'></slot>

              <child ref='childs'></child>

              </div>

           `,

           components:{

              Child

           },

           data(){

              return {

                  parents:'我是父组件'



              }

           },

           mounted(){

              // dom渲染完成 父组件钩子

               console.log(this.$refs.childs)

               console.log(this.$refs.childs.$el)

               console.log(this.$refs.childs.msg)

           }

       }

      

       new Vue({

           el:'#app',

           components:{

              Parent

           },

           template:`

               <div>

                  <parent>

                     <div>我是插槽内容</div>

                     <div slot='hello'>我是插槽内容2</div>

                  </parent>

              </div>

           `,

           data(){

              return{}

           },

       })

    </script>

</body>

</html>