在html文件中运行vue父传子代码详情 和代码中文详细注解
时间: 2024-04-19 15:28:21 浏览: 31
在HTML文件中运行Vue代码,需要引入Vue的CDN链接和Vue组件的脚本文件。下面是一个在HTML文件中运行Vue父传子代码的示例,包含了中文详细注解:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue父传子示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!-- 引入Vue的CDN链接 -->
</head>
<body>
<div id="app">
<parent></parent> <!-- 在div中使用父组件 -->
</div>
<script>
// 父组件
Vue.component('parent', {
template: `
<div>
<child :message="message"></child> <!-- 将父组件的message属性传递给子组件 -->
</div>
`,
data() {
return {
message: 'Hello from parent!', // 定义父组件的message属性
};
},
});
// 子组件
Vue.component('child', {
props: ['message'], // 声明props属性,指定要接收的属性名
template: `
<div>
<p>{{ message }}</p> <!-- 使用props属性接收父组件传递的message属性 -->
</div>
`,
});
new Vue({
el: '#app', // 指定Vue实例挂载的元素
});
</script>
</body>
</html>
```
以上代码示例在HTML文件中使用Vue的CDN链接和Vue组件的脚本文件。在`<div id="app">`中使用父组件,并在父组件中将message属性传递给子组件。子组件通过props属性接收父组件传递的message属性,并在模板中使用该属性。
你可以将以上代码保存为一个HTML文件,并在浏览器中打开该文件,即可看到Vue父传子示例的运行结果。