我们已经看到了组件及其用法。例如，我们有一个需要在整个项目中重复使用的内容。我们可以将其转换为组件并将其使用。
让我们看一个简单组件的示例，看看render函数必须在其中做什么。
例
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1>Hello World</h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>考虑上面的示例简单示例，该示例可打印Hello World。
现在，如果要重用该组件，可以通过再次打印来实现。例如，
<div id = "component_test"> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> </div>
输出将是以下内容：
Hello World Hello World Hello World Hello World但是，现在我们需要对该组件进行一些更改。我们不希望打印相同的文本。我们如何改变它？如果我们在组件内部输入内容，是否会考虑？
让我们考虑以下示例，看看会发生什么。
<div id = "component_test"> <testcomponent>Hello Jai</testcomponent> <testcomponent>Hello Roy</testcomponent> <testcomponent>Hello Ria</testcomponent> <testcomponent>Hello Ben</testcomponent> </div>
输出结果与我们之前看到的相同，它不会根据需要更改文本。
Tips：组件确实提供了一些称为slot的东西。让我们利用它，看看是否能达到预期的效果。
例
<html>
<head>
<title>VueJs - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1><slot></slot></h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>如上面的代码所示，在模板中我们添加了插槽，因此现在需要使用值在组件内部发送。大家可以试试运行下效果，可以输出我们想要的数据。
Hello Jai Hello Roy Hello Ria Hello Ben作者：terry，如若转载，请注明出处：https://www.web176.com/vuejs/989.html
