ホームページ > 記事 > ウェブフロントエンド > Vue でプレースホルダーを使用する方法
Vue でプレースホルダーを使用する方法
- php中世界最好的语言オリジナル
- 2018-04-12 14:58:2812977ブラウズ
今回は、Vue でプレースホルダーを使用する方法と、Vue でプレースホルダーを使用する際の 注意事項 について説明します。以下は実際のケースです。
簡単に言うと、これはプレースホルダーであり、必要なときに HTML を直接渡すと表示されます。 「プロップは親コンポーネントから子コンポーネントにデータを渡すことができ、スロットは親コンポーネントから子コンポーネントに HTML を渡すことができる」という人もいます。では、どうすればそれを達成できるのでしょうか？シングルスロット:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<p id="app">
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</p>
<script type="text/javascript">
Vue.component('my-component', {
// 有效，因为是在正确的作用域内
template: '<p>\
<h2>我是子组件的标题</h2>\
<slot>只有在没有要分发的内容时才会显示。</slot>\
</p>',
data: function () {
return {
}
}
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>
コンポーネント内のテンプレートにslotタグを記述し、親が子コンポーネントを呼び出すときにhtmlを渡します。
名前付きスロット:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<p id="app">
<my-component>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</my-component>
</p>
<script type="text/javascript">
Vue.component('my-component', {
// 有效，因为是在正确的作用域内
template: '<p class="container">\
<header>\
<slot name="header"></slot>\
</header>\
<main>\
<slot></slot>\
</main>\
<footer>\
<slot name="footer"></slot>\
</footer>\
</p>',
data: function () {
return {
}
}
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>
名前付きスロットは、名前のとおり、複数のスロット タグがある場合、親コンポーネントを呼び出すときに、それぞれに独自の名前を付ける必要があります。名前のないスロット タグがある場合は、親コンポーネントが必要です。コンポーネント 渡されるデフォルトの HTML コードはすべて、名前のないスロット タグに出力されます。
スコープスロット
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<p id="app">
<!-- 在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->
<child>
<template scope="props">
<span>hello from parent</span><br>
<span>{{ props.text }}</span>
</template>
</child>
</p>
<script type="text/javascript">
// 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
Vue.component('child',{
template:'<ul>' +
'<slot text="hello from child"></slot>' +
'</ul>',
data:function(){
return {
}
},
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>
スコープ付きスロットは、既にレンダリングされた要素の代わりに再利用可能なテンプレート (データを渡すことができる) として機能する特別なタイプのスロットです。 実際、これは、子コンポーネントによって渡された props オブジェクトを親コンポーネントで取得し、それを親コンポーネントにレンダリングすることと同じです。
この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
element-ui テーブルを操作してテーブルの内容を変更する方法
以上がVue でプレースホルダーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。