Question

我正在用Vue构建简单的按钮组件。我正在尝试在组件中存储道具“链接”。

然后在父组件中，我只想使用按钮组件，例如：

<btn :link="page link" />

我可以使用简单的“ a”标签来完成此操作，但是我想使用router来触发页面转换。也许我在组成组件时确实做错了什么。如果有人有不同的想法，我会决定的。

我需要一个按钮组件，其中在父组件中我将链接作为数据传递。

<script>
export default {
	props: {
		link: {
			type: String,
			required: false,
		},
	},
}
</script>

<template>
	<div class="btn" @click="$router.push(link)">
		<slot>btn text</slot>
	</div>
</template>

Answer 1

我不知道，但是我用'：'将链接数据传递给了父对象，并且应该没有它，因为我没有绑定任何东西。所以工作代码现在看起来像这样

require '/var/www/xxxx/headless-chromium-php/vendor/autoload.php';

$browserFactory = new HeadlessChromium\BrowserFactory('google-chrome');
$browser = $browserFactory->createBrowser([
  'sendSyncDefaultTimeout' => 30000,
  'startupTimeout' => 300
]);

$page = $browser->createPage();
$page->navigate('https://xxxx/1')->waitForNavigation();

$page->setCookies([
  HeadlessChromium\Cookies\Cookie::create('PHPSESSID', $_COOKIE['PHPSESSID'], ['expires'])
])->await();

//output1
$page->screenshot([
  'clip' => $page->getFullPageClip()
])
->saveToFile('/var/www/xxxx/full.png');

//output2
$page->screenshot()->saveToFile('/var/www/xxxx/hoge.png');

//output3
$page->pdf(['printBackground'=>false])->saveToFile('/var/www/xxxx/hoge.pdf');

$browser->close();

<script>
export default {
	props: {
		link: {
			type: String,
			required: true,
		},
	},
}
</script>

在父组件中，我只是这样称呼它

<template>
	<div class="btn" @click="$router.push(link)">
		<slot>btn text</slot>
	</div>
</template>

Vue路由器链接按钮组件

1 个答案: