vue 组件传值

最新推荐文章于 2024-07-25 15:31:54 发布

王小王和他的小伙伴

最新推荐文章于 2024-07-25 15:31:54 发布

阅读量458

点赞数 1

分类专栏： vue知识点文章标签： vue

本文链接：https://blog.csdn.net/weixin_55042716/article/details/114434354

版权

vue知识点专栏收录该内容

5 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue.js中的全局组件和局部组件的注册与使用，包括如何声明和在模板中插入自定义标签。同时，阐述了父子、子父、兄弟组件间的数据传递方法，如props、$emit和事件总线（中央事件总线）的使用，以及公共传递的provide和inject特性。通过这些机制，开发者可以在Vue应用中灵活地管理组件间的通信。

摘要由CSDN通过智能技术生成

1.1 全局组件

全局组件注册形式如下：

// 声明全局组件
	 Vue.component(componentName,{ 
	 	data: '组件数据', 
	 	template: '组件模版内容' 
	 })

上述示例中， component() 的第一个参数是组件名（实则可以看作是HTML标签名称），第二个参
数是一个对象形式的选项，里面存放组件的声明信息。全局组件注册后，任何Vue实例都可以使用。

例如，有以下代码：

	// 声明一个全局的HelloWorld组件
	Vue.component('HelloWorld', {
		data: function(){
			return {
				 msg: 'HelloWorld' 
			}
		},
		template: '<div>{{msg}}</div>'
	});

1.2、局部组件

局部组件定义后只能在当前注册它的Vue实例中使用，其是通过某个 Vue 实例/组件的实例选项
components 注册。
例如，有以下代码：

	var Child = {
		template: '<div>A custom component!</div>'
	}
	new Vue({ 
		components: {
			// <my-component> 将只在父组件模板中可用
			my-component': Child
		}
	})

1.3、组件的使用

在HTML模板中，组件以一个自定义标签的形式存在，起到占位符的功能。通过Vue.js的声明式渲染后，占位符将会被替换为实际的内容，下面是一个最简单的模块示例：此处使用了语法糖

  <body>
	<div id="app">
	 	<fat></fat> 
	</div>
	
<!-- 子 -->
    <template id='son'>
        <div>
            <h1>子</h1>
        </div>
    </template>
<!-- 父 -->
    <template id='fat'>
        <div>
            <h1>父</h1>
        </div>
    </template>
  </body>

<script>
//子
    let son = {
      template:"#son",
      data(){
        return {
          name:"儿子",
          a:"儿子box"
        }
      },
      components:{
      }
    }
//父
    let fat = {
      template:"#fat",
      data(){
        return {
          name:"父亲",
          a:"父亲box"
        }
      },
      components:{
        son
      }
    }
// 
var vm = new Vue({
    el:"#app",
    data:{
        name:"祖先",
        a:"祖先box"
    },
    components:{
        fat
    }
})

</script>

二组件之间的传值

2.1 父子传值

思路：
1.给父组件调用子组件的位置，绑定属性。
属性名是需要接受的数据名
属性值是父组件要发给子组件的数据
2.子组件中用props 发送的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2> {{name}}</h2>
        <funn></funn>
    </div>

<!-- 子 -->
    <template id='son'>
        <div>
            <h1>子</h1>
           收到了父级的：{{abc}}
        </div>
    </template>
<!-- 父 -->
    <template id='fun'>
        <div>
            <h1>父</h1>
            <son :abc="a"></son>
        </div>
    </template>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//儿子
    let son = {
      template:"#son",
      data(){
        return {
          name:"儿子",
          a:"儿子box"
        }
      },
      // 用props 发送的数据
      props:["abc"], 
      components:{
      }
    }
// 父亲
    let funn = {
      template:"#fun",
      data(){
        return {
          name:"父亲",
          a:"父亲box"
        }
      },
      components:{
        son
      }
    }
// 
var vm = new Vue({
    el:"#app",
    data:{
        name:"祖先",
        a:"祖先box"
    },
    components:{
        funn
    }
})
</script>

2.2 子父传值

思路：
子组件在调用子组件的位置添加自定义事件使用 this.$emit发送数据
父组件 create 接收数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2> {{name}}</h2>
        <funn></funn>
    </div>
<!-- 子 -->
    <template id='son'>
        <div>
            <h1>子</h1>
        </div>
    </template>
<!-- 父 -->
    <template id='fun'>
        <div>
            <h1>父</h1>
            <p>我拿到了儿子的：{{b}}</p>
            <son v-on:myeve="getData"></son>
        </div>
    </template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 子
    let s = {
      template:"#son",
      data(){
        return {
          name:"儿子",
          a:"儿子box"
        }
      },
      components:{
      },
      created(){
      //通过 $emit 传值
        this.$emit("myeve", this.a)
      }
    }
// 父
    let f = {
      template:"#fun",
      data(){
        return {
          name:"父亲",
          a:"父亲box",
          b:''
        }
      },
      components:{
        son:s
      },
      methods:{
        getData(v){
          console.log(v);
          this.b = v;
      }
     } 
   }
//
var vm = new Vue({
    el:"#app",
    data:{
        name:"祖先",
        a:"祖先box"
    },
    components:{
        funn:f
    }
})
</script>

2.3 兄弟传值

思路：
1.定义中央事件总线let bus = new Vue();
2.触发自定义事件并发送 bus. $e m i t (要出发的事件名, 要发送的数据) 3 . 触发自定义事件并接收 b u s .$ on(要出发的事件名,要发送的数据)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2> {{name}}</h2>
        <funn></funn>
    </div>

<!-- 兄弟1 -->
    <template id='son1'>
        <div>
            <h1>兄弟1</h1>
            <p><button @click="send">给</button>兄弟了一个：{{a}}</p>    
        </div>
    </template>
<!-- 兄弟2 -->
    <template id='son2'>
        <div>
            <h1>兄弟2</h1>
            <p>我收到了兄弟的：{{c}}</p>
        </div>
    </template>

    <template id='funn'>
        <div>
            <h1>父亲</h1>
            <s1></s1>
            <s2></s2>
        </div>
    </template>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 中央事件总线
    let bus = new Vue();

// 兄弟1  传值给  兄弟2
    let s1 = {
      template:"#son1",
      data(){
        return {
          name:"兄弟1",
          a:"兄弟1-box"
        }
      },
      components:{
      },
      methods:{
        send(){
          bus.$emit("qwe", this.a);
        }
      }
    }
// 兄弟2
    let s2 = {
      template:"#son2",
      data(){
        return {
          name:"兄弟2",
          a:"兄弟2-box",
          c:''
        }
      },
      components:{
      },  
      created(){
        bus.$on("qwe",(v)=>{
          console.log(v);
          this.c = v;
        })
      }    
    }

// 父亲 
    let funn = {
      template:"#funn",
      data(){
        return {
          name:"父亲",
          a:"父亲-box",
        }
      },
      components:{
           s1,
           s2
      },      
    }
 //
var vm = new Vue({
    el:"#app",
    data:{
        name:"祖先",
        a:"祖先box"
    },
    components:{
      funn
    }
})
</script>

2.4 公共传递

思路：
在父组件内部添加 provide:{命名:‘内容’} 并赋明需要具体传递的值，
在子或者子子内部 inject:[“命名”] 接收
在相对应页面中可直接获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2> {{name}}</h2>
        <funn></funn>
    </div>
    
<!-- 兄弟1 -->
    <template id='son1'>
        <div>
            <h1>兄弟1</h1>   
            <p>收到 {{de}}</p>
        </div>
    </template>
<!-- 兄弟2 -->
    <template id='son2'>
        <div>
            <h1>兄弟2</h1>
        </div>
    </template>

<!-- 父亲 -->
    <template id='funn'>
        <div>
            <h1>父亲</h1>
            <s1></s1>
            <s2></s2>
        </div>
    </template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

// 兄弟1 
    let s1 = {
      template:"#son1",
      data(){
        return {
          name:"兄弟1",
          a:"兄弟1-box",
        }
      },
      components:{
      },
      //需要接收的
      inject:["de"]
    }
// 兄弟2
    let s2 = {
      template:"#son2",
      data(){
        return {
          name:"兄弟2",
          a:"兄弟2-box",
        }
      },
      components:{
      },  
    }

// 父亲
    let funn = {
      template:"#funn",
      data(){
        return {
          name:"父亲",
          a:"父亲-box",
        }
      },
      components:{
           s1,
           s2
      }, 
      //需要传递的
      provide:{
        de: "不明物体"
      }     
    }
// 
var vm = new Vue({
    el:"#app",
    data:{
        name:"祖先",
        a:"祖先box"
    },
    components:{
      funn
    },
})
</script>