vue第五天component中级

最新推荐文章于 2023-12-13 09:52:11 发布

qq_40262972

最新推荐文章于 2023-12-13 09:52:11 发布

阅读量140

点赞数

分类专栏： vue 文章标签： vue 小白 component

本文链接：https://blog.csdn.net/qq_40262972/article/details/93850816

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue初学day05

vue组件

vue组件

这里要提一句的是，组件可以拥有Vue的绝大多数配置。组件上面可以支持Vue实例的绝大多数配置。
1.组件嵌套时是有一定规则的，例如，在table里只能放tr,td,th…，如果放入组件不会解析

<body>
    <div id="app">
        <p>这是个table!</p>
        <div>
            <table>  
                <hello></hello>
                //放入tr标签使用is方式，代表tr标签引入的是一个组件
                <tr is="hello"></tr>
            </table>
        </div>        
    </div>
</body>
<script>
    Vue.component("hello",{
        template:"<div>我是hello!</div>"
    })
    new Vue({
        el:'#app'
    })
</script>

这样写的结果就是

页面上也可以出现，但是我们去看一下渲染出来的dom结构

<body>
     
    <div id="app">
    	<p>这是个table!</p> 
    	<div>
	    	<div>我是hello!</div>    //被挤到外面来了
	    	<table>
		    	<tbody>
		    		<div>我是hello!</div>//通过is绑定后，还是被外面被套了个tbody
		    	</tbody>
	    	</table>
    	</div>
    </div>
<script>
    
    Vue.component("hello",{
        template:"<div>我是hello!</div>"
    })
    new Vue({
        el:'#app'
    })
</script>
</body>//当然我们一般不会这么做，所以简单看看就好

2.组件嵌套带来的数据传输问题
①通过props
第一步，将数据绑定到子组件上

 <bbb money="2"></bbb>

第二步，子组件通过props去接收数据

'bbb':{
    props:['money']
}//这就可以使用了

具体的代码实例

<body>
    <div id="app">
        <father></father>
    </div>
   
    <template id="father">
        <div>
            <input type="text" v-model="message.value">
            <son :message="message"></son>//这里将数据绑定到子组件上
        </div>
    </template>
    <template id="son">
        <div>
            <input type="text" v-model="message.value">//这样写是为了更方便查看
        </div>
    </template>
</body>
<script>
    //Vue/React单向数据流的体现：数据只能从父级组件流向子级组件
    //实现父子间的数据共享，依靠的就是应用类型的地址传递
    Vue.component("father",{
        template:"#father",
        data(){
            return {
                message:{
                    value:"hello!"
                }
            }
        }
    })
    Vue.component("son", {
        template: "#son",
        props:["message"] //这里接收数据
    })
    new Vue({
        el:"#app"
    })
</script>

props的写法不止数组的写法，我们可能有这样的需求，即对父组件传递过来的数据进行验证。看代码

props:{ //假设data中money为 10 （number）
   money:Number    //限制数据类型为number
   //假设改成Boolean，[Vue warn]: Invalid prop: type check failed for prop "money". Expected Boolean, got Number.
   //会报这样的warning
   //money:[Number,String] //限制数据类型为number或者string
   // money:{
   //     type:Number,
   //     default:10  //默认值
   // }
   // money:{
   //     validator(val){  val为money的值
   //         return val>50
   //     }//如果money<=50,就会报出warning
   // }
}

②通过viewmodel链(关系链)

this.$root.$children[3].$parent....等等//都是通过this调用
$root  根节点     $children[3]   第4个孩子节点（下标为3） $parent   父亲节点

需要注意的是，这里父亲节点，孩子节点，都只是组件，中间掺杂的dom不计算在内
这样的话任何两个组件之间的数据都可以互相调用，获取
但是，缺点：太乱了
除了上面两种方法，还有一种方法
③插槽 slot，直接上代码

<body>
    <div id="app">
        <aaa>    //父组件，slot后绑定了一个name名，是为了告知子组件该接受哪一个
            <p slot="top">111111</p>
            <p slot="bottom">222222</p>
        </aaa>
    </div>
    <template id="aaa">
        <div>
            <p>我是aaa组件！</p>
            <slot name="top"></slot>  //接收slot="top" 的那个
            <slot name="bottom"></slot>
        </div>
    </template>
</body>
<script>
   //在组件标签内部写入的内容默认的会被替换掉，之前已经试过了
   //如果想要在组件的模板里使用这些内容，
   //就在对应的位置写上slot标签，这个slot标签就代表着这些内容
   //slot  插槽    匿名   具名槽口
    Vue.component("aaa",{
        template:"#aaa"
    })
    new Vue({
        el:"#app",
        data: {
            num:1
        }
    })
</script>

今天先到这，明天还有更多组件的内容

qq_40262972

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue第五天component中级

vue初学day05vue组件vue组件这里要提一句的是，组件可以拥有Vue的绝大多数配置。组件上面可以支持Vue实例的绝大多数配置。1.组件嵌套时是有一定规则的，例如，在table里只能放tr,td,th…，如果放入组件不会解析<body> <div id="app"> <p>这是个table!</p> ...
复制链接

扫一扫