Vue-根组件-局部组件-全局组件-组件间的通信

最新推荐文章于 2024-05-11 17:03:33 发布

zdc45625

最新推荐文章于 2024-05-11 17:03:33 发布

阅读量2k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/zdc45625/article/details/88745764

版权

文章目录

一、根组件

每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>根组件</title>

</head>
<body>
<div id="app">
    <h1>{
   {
    title }}</h1>
    <p>{
   {
    title }}</p>sdfsdaf
</div>
<div id="main"></div>
</body>
<script src="js/vue.js"></script>
<script>

    // template就是一个组件的html实体代码块
    new Vue({
   
        el: '#app',
        data: {
   
            title: '根组件'
        },
        // template模板，书写html代码块
        // 根组件也可以添加template模板，但是建议直接使用挂载点
        // 每个组件的template模板中只能解析一个(第一个)根标签
        template: `
        <!--<div></div>-->
        <div id="home">
            <h1>{
    { title }}</h1>
            <p>{
    { title }}</p>
            <i>{
    { title }}</i>
        </div>
        <div>
            {
    { title }}
        </div>
        `
    });
    // 只要是被new出来的vue实例都是根组件，所以一个vue单页面项目中只需要出现一次new创建的vue实例
    new Vue({
   
        el: '#main'
    })
</script>
</html>

二、局部组件

最低0.47元/天解锁文章

zdc45625

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue-根组件-局部组件-全局组件-组件间的通信

文章目录一、根组件二、局部组件三、全局组件四、组件间的通信一、根组件每一个组件都是一个vue实例每个组件均具有自身的模板template，根组件的模板就是挂载点每个组件模板只能拥有一个根标签子组件的数据具有作用域，以达到组件的复用<!DOCTYPE html><html><head> <meta charset="utf-8"&g...
复制链接

扫一扫